如何在html/css中的输入字段的左上角放置标签

Question

Please refer the image below for reference.请参考下图以供参考。 I want a similar kind of form with label being placed on top of input field in top left corner.我想要一种类似的表单，标签放置在左上角的输入字段顶部。

Img:图像：

Thanks in advance!提前致谢！

--- update --- - - 更新 - -

I tried and i was able to place label separately on top of the input field and was unable to merge it.我试过了，我能够将标签单独放在输入字段的顶部，但无法合并它。

this is how it looks currently:这是它目前的样子：

<div class="form-group mt10">
            <label for="inputName">Name <span class="reqField">*</span></label>
            <input required type="text" class="form-control" id="inputName" placeholder="Name">
        </div>
        <div class="form-group">
            <label for="inputCountry">Country</label>
            <input type="text" class="form-control" id="inputCountry" placeholder="Country">
        </div>

Answer 1

Something like this will help.这样的事情会有所帮助。

 body.app-body { background: #cecece; } .form-group { border: 2px solid; margin: 10px; border-radius: 15px; margin-top: 20px; } .form-group>label { position: absolute; top: 6px; left: 20px; padding: 5px 10px; border-radius: 15px; background: #fff; } .form-group>input { border: none; background: transparent; }

 <body class="app-body"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <form id="first_name"> <div class="form-group"> <label>First name</label> <input type="text" class="form-control input-lg" /> </div> </form> </body>

Answer 2

Hey bud,嘿，伙计，

I think what you are looking for is something similar to this.我认为您正在寻找的东西与此类似。 I certainly hope this helps, champion!我当然希望这会有所帮助，冠军！

 .custom_badge { width:80px; height:30px; position:absolute; margin-top: -15px; border-radius:12px; -webkit-border-radius:12px; background:#708090; color:white; text-align:center; vertical-align:bottom; font-size:14px; font-style: normal; font-weight: 400; font-family: arial,sans-serif; margin-left: 10px; padding-top:3px; } .custom_input { border: none !important; border:solid 1px #708090 !important; border-radius:12px !important; -webkit-border-radius:12px !important; width:350px !important; text-align: end !important; color:#54606C !important; }

 <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body class="app-body"> <h5 class="lead small mx-2 text-info text-uppercase my-4">Rounded label on input field | Demo Code</h5> <div class="form-group mx-2"> <label class="align-middle custom_badge" for="inputName">Name <span class="reqField">*</span> </label> <input required type="text" class="form-control custom_input" id="inputName"> </div> <div class="form-group mx-2 my-4"> <label class="align-middle custom_badge" for="inputCountry">Country </label> <input type="text" class="form-control custom_input" id="inputCountry"> </div> </body>

如何在html/css中的输入字段的左上角放置标签

问题描述

2 个解决方案

解决方案1
0 已采纳 2021-07-26 04:38:17

解决方案2
0 2021-07-26 05:51:21

如何在html/css中的输入字段的左上角放置标签

问题描述

2 个解决方案

解决方案1 0 已采纳 2021-07-26 04:38:17

解决方案2 0 2021-07-26 05:51:21

解决方案1
0 已采纳 2021-07-26 04:38:17

解决方案2
0 2021-07-26 05:51:21