A customized input text box in html/html5

Question

Actually, I want to implement a text box as shown in the figure:

I want that th

Answer 1

Set <input> border be only bottom side. Here is the demo, just like your picture shows.

Answer 2

What have you tried so far? You pretty much answered your own question, make the input have a transparent background.

input {
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 2px solid black;
    width: 20px;
}

jsFiddle