Geek Answers Handbook

HTML string text box

I want to create a text box as follows:

enter image description here

This is just a line where you can enter text. Is it possible to do this with css? or at boot?

+7
html css html5 css3
source share
6 answers

Ya, maybe DEMO HERE

HTML

<input type="text" class="text-line" />

CSS

 body { background: #333333; } .text-line { background-color: transparent; color: #eeeeee; outline: none; outline-style: none; border-top: none; border-left: none; border-right: none; border-bottom: solid #eeeeee 1px; padding: 3px 10px; }
+8
source share

Yes maybe

HTML

 <input type="text"/>

CSS

 input[type="text"] { border:none; /* Get rid of the browser styling */ border-bottom:1px solid black; /* Add your own border */ }

Fiddle

+2
source share

You can do this without images, and underlining is limited by the input width, but this will require a number of CSS properties. See this: http://jsfiddle.net/2jJvF/

The CSS I used was as follows:

 * { background-color: black; } input[type=text] { color: white; border: none; } input[type=text]:focus { outline: none; } .text-container { border: 0px 1px 0px 0px; border-bottom: white solid; }
+2
source share

I think you can create a text box and then set the background project to an image with a horizontal line.

 <!DOCTYPE html> <html> <head> <style> .body1 { background-image:url('gradient2.png'); background-repeat:repeat-y; padding-left:20px; } </style> </head> <body> <input type="text" class="body1" /> </body> </html>
0
source share
 .text-input { border-bottom: solid 1px black; border-top: none; border-left: none; border-right: none; } input[type="text"]:focus{ outline: none; }

check my jsfiddle
http://jsfiddle.net/inked/kCXh5/

0
source share

I individually tried the 1st and 3rd methods, but did not work. When I tried them together, it worked for me. This, of course, is a copy of the above, but this is what it looks like.

 input[type="text"] { border:none; /* Get rid of the browser styling */ border-bottom:1px solid black; /* Add your own border */ } .text-line { background-color: transparent; color: #eeeeee; outline: none; outline-style: none; border-top: none; border-left: none; border-right: none; border-bottom: solid #eeeeee 1px; padding: 3px 10px; } </style> </head> <body> <h2>Card</h2> <div class="card"> <div class="container"> <h4><b>Question</b></h4> <input type="text" class="text-line"/> <p>Architect & Engineer</p> </div> </div> </body>
0
source share

More articles:


All Articles