配售<label>文本的文本输入

Question

我期待得到这个代码的边框内：

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

看起来像这样text input减去颜色，复选框，值等基本上我希望它只是看看就像图例标记在字段集中所做的那样，但是没有标签和文本输入边界内的标签。提前致谢！

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>

希望这有助于:)。