放置< label>文字输入框内的文字 [英] Placing <label> text inside the border of a text input

问题描述

我正在寻找以下代码:

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

看起来像这样

减去颜色，复选框，值等.本质上，我希望它看起来像图例标签在字段集中一样，但是在文本输入的边框内没有标签和标签.预先感谢！

minus the colors, checkbox, value, etc. Essentially I want it to look just like a legend tag does in a field set but without either tags and the label inside the border of the text input. Thanks in advance!

推荐答案

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

Here is what you need. You can change the CSS values accroding to your need. Also important is to set the background-color of label to the same color as you form/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>

希望这会有所帮助:).

Hope this helps :).

这篇关于放置< label>文字输入框内的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！