html/html5 中的自定义输入文本框

A customized input text box in html/html5

提问by gopi1410

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

其实我想实现一个如图所示的文本框：

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.

我希望用户应该能够在所需的空间中输入数字。请注意，它将是透明的，以便背景可见。涉及 html5 画布的解决方案也不错。

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

那么，有可能做到这一点吗？如果是这样，如何？

回答by Christian

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

js小提琴

回答by ijse

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

将<input>边框设置为仅底部。这是演示，就像您的图片所示。