html - 将 文本放置在文本输入的边框内

Question

我正在寻找这个代码:

<form id="first_name">
    <div class="form-group">
         <label>First name</label>
         <input type="text" class="form-control input-lg" />
    </div>
</form>

看起来像这样

减去颜色、复选框、值等。本质上我希望它看起来就像字段集中的图例标签，但没有任何标签和文本输入边框内的标签。提前致谢!

Answer 1

这就是您所需要的。您可以根据需要更改 CSS 值。同样重要的是将标签的 background-color 设置为与您的表单/html 相同的颜色。

.form-group{
  padding:10px;
  border:2px solid;
  margin:10px;
}
.form-group>label{
  position:absolute;
  top:-1px;
  left:20px;
  background-color:white;
}

.form-group>input{
  border:none;
}

<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>

希望这有帮助:)。