A customized input text box in html/html5

Question

Actually, I want to implement a text box as shown in the figure: enter image description here

I want that the user should be able to enter the number in the required space. Note that it would be transparent so that the background is visible. A solution involving html5 canvas would also be good.

So, is it possible to do this? If so, how?

Have you tried? How does your code look? Maybe try regular input fields and css styling. — lobner
– lobner, Commented May 10, 2012 at 5:33
it is a simple text box. My problem is to make the text box just a underline rather than the text box. — gopi1410
– gopi1410, Commented May 10, 2012 at 5:38

Prashant Pokhriyal · Accepted Answer · 2018-05-10 14:15:58Z

12

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

edited May 10, 2018 at 14:15

Prashant Pokhriyal

3,8474 gold badges33 silver badges42 bronze badges

answered May 10, 2012 at 5:33

Christian

19.8k3 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gopi1410 Over a year ago

oh silly me, how did I miss this one! Thanks. Actually I knew about transparent, but didn't knew that border:0 & outline:0 work for an input field too. I couldn't remove the outer box in the <input> tag

Prashant Pokhriyal · Accepted Answer · 2018-05-10 14:17:51Z

0

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

edited May 10, 2018 at 14:17

Prashant Pokhriyal

3,8474 gold badges33 silver badges42 bronze badges

answered May 10, 2012 at 5:40

ijse

3,0451 gold badge22 silver badges25 bronze badges

Collectives™ on Stack Overflow

A customized input text box in html/html5

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related