显示文本框值

Question

如何只显示文本字段的值，而不显示实际的白框。所以我所拥有的是一个类型为数字的简单文本字段。

<input type="number" id="text" value="0"/>

我想要做的只是显示值，而不是实际的盒子本身。

Answer 1

你应该可以用CSS做到这一点。只需将框的样式设置为类似于网页的背景，然后将输入框的属性设置为禁用，以便用户无法更改值。最后，您可以设置光标的CSS，以便在鼠标悬停时它看起来不像是文本字段。

Answer 2

您可以删除边框并使用CSS将背景颜色设置为透明：

input
{
    border: none;
    background-color:transparent;
}

Answer 3

只需更改您的代码：

<input type="number" id="text" value="0" style="border:0px;"/>

这应该会产生您的预期结果。

Answer 4

如上所述，您可以使用CSS：

#text{
    border: none;
    background: none;
    cursor: default;
    padding:0;
    margin:0;
    font-size:1em;
}

您需要使字体与文档的其余部分匹配。这是一个小提琴演示：http://jsfiddle.net/mestekweb/URkca/

Answer 5

<div style="background:#FFFFCC">
<input type="number" id="text" value="0" style="border:0px; background:none;"/>
</div>