CODEWITHSUNDEEP
htmlcssangularborder
Maurya
Maurya

Reputation: 39

Text in Border of input textbox

Please click here for imageI would like to see something like text name on the border for input box.

The HTML is - 

<input type="text"
       id="text creator"
       class="form-control" placeholder="text creator"
       name="object-creator"/>

"text creator" should appear on the border.

Upvotes: 1

Views: 2643

Answers (1)

J. Afarian
J. Afarian

Reputation: 578

I'm not sure what you mean by "on the border", so here are two options that I think you might be after.

Using a fieldset / legend, the legend is placed "on the border" of the fieldset.

<fieldset>
<legend>text creator</legend>

<input type="text"
   id="text creator"
   class="form-control"
   name="object-creator"/> 
</fieldset>

https://jsfiddle.net/jafarian/n5ocxpod/

Alternatively, if you just mean above the input field, use a label:

<label for="text creator">text creator</label><br>
<input type="text"
   id="text creator"
   class="form-control"
   name="object-creator"/>

http://jsfiddle.net/jafarian/hjv74tdw/106/

Edit based on comments: This one still uses labels (rather than a placeholder), but aligns the label to overlap the border of the input field, and sets its z-index to appear on top of the input field. Make sure your background colours match your label background!: https://jsfiddle.net/jafarian/04493rbu/

Upvotes: 2

Related Questions