how to change input text box style to line?

Question

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

name :  _____________  
email:  _____________  
mob  :  ___         


        

Answer 1

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;