Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to change input text box style to line?

Tags:

html

css

textbox

in my form I have three input fields name, email, mobile but I want to change input text box like -

name :  _____________  
email:  _____________  
mob  :  _____________  
like image 483
nectar Avatar asked Jun 28 '10 08:06

nectar


2 Answers

In your CSS:

input[type=text] {
    background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
}

From here you can play with padding to position the actual text entry where you would like it. For instance, to have the line extend 5 pixels either side of the actual entry area:

    padding: 2px 5px;
like image 189
Matthew Scharley Avatar answered Oct 13 '22 12:10

Matthew Scharley


if you want to this also in ie6 than you can use bg image for this with background-position

.

input{
    background:url(bg-dot.jpg) repeat-x center bottom;
    border:none;
    padding:2px 2px;
}

so for all browser support with ie6 you should use this.

like image 37
Kali Charan Rajput Avatar answered Oct 13 '22 13:10

Kali Charan Rajput