Placing text inside the border of a text input

Question

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

enter image description here

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!

Manish · Accepted Answer

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

AzizStark · Answer

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>

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

Tags:

html

css

forms

input

Dtrav

2 Answers

Manish

AzizStark

Recent Activity

Donate For Us