Placing text inside the border of a text i

问题:

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 text input minus the colors, checkbox, value, etc. Essentially I want it to look just like a legend tag does in a fieldset 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 :).