问题
I'm looking get this code:
<form id="first_name">
<div class="form-group">
<label>First name</label>
<input type="text" class="form-control input-lg" />
</div>
</form>
To look like this
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!
回答1:
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 :).
回答2:
You can use legend tag.
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Contact</legend>
Name <input type="text"><br>
Email <input type="text"><br>
</fieldset>
</form>
</body>
</html>来源：https://stackoverflow.com/questions/45150781/placing-label-text-inside-the-border-of-a-text-input