how to change input text box style to line?

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;

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.