how to change input text box style to line?

Issue

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

name :  _____________  
email:  _____________  
mob  :  _____________  

Solution

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;

Answered By – Matthew Scharley

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.