Placing <label> text inside the border of a text input

Issue

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!

Solution

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 :).

Answered By - Manish