指定字体时，HTML输入框对于数据来说太宽

Question

要求我们某些表单上的输入字段具有粗体文本的权力。问题是在样式表中这样做的天真的方式：

input {
    font-weight: bold;
}

使用此HTML：

1234567890
<input type="text" maxlength="10" size="10" value="1234567890"/>

立即引发问题：现在所有输入框太宽。

我把它缩小到雅虎重置，它将输入框从父（文档正文）告诉font: inherit。这是我想要的行为 - 输入框与父体具有相同的字体。但是一旦我指定了字体，或者使用了继承，输入框就会再次变宽。这在IE和Firefox中是相同的，因此它可能不是浏览器兼容性问题。

查看实际操作：http://jsfiddle.net/clintp/bZChP/3/

如何指定输入框的字体，但是它们的大小是否恰当？

更新：“恰当地”http://jsfiddle.net/clintp/bZChP/5/右侧的输入窗口小部件的大小适合其数据，左侧的输入窗口小部件不适合。目标是使两个框具有相同的大小，相同的文本字体[一个为粗体！]，而不必按字段为应用程序字段中的每个输入框指定框大小。 （有成千上万。）

Answer 1

实际上，除非使用等宽字体，否则无法可靠地调整输入字段的大小。即使对于monopace字体，浏览器在计算字段宽度时也存在错误。如果您只使用size属性设置HTML中的可见宽度，并且在CSS中设置字体大小和系列，列出似乎正常工作的等宽字体，则可能会获得最一致的结果。如，

输入{字体：100％Lucida控制台，等宽; }

这将解决某些浏览器上的问题，例如： <input size=10>会产生一个大约12个字符宽的字段。

关于输入框与父体具有相同字体的要求，那么你也需要在父体中使用等宽字体。 ☺说真的，虽然我们应该能够使用比例字体设置输入字段的宽度，但事情就是不起作用。即使支持ch单元的浏览器（数字输入的问题，如果它起作用）也会不一致和不正确地执行，以便设置例如即使输入0000000000，width: 10ch也无法提供正确的渲染。

Answer 2

创建一个可调整字体大小和重量的CSS类。在要设置样式的输入中使用该类名称。

<input class="bold" type="text" maxlength="10" size="10" value="1234567890"/>

.bold {
    font-weight:bold;
    font-size:10px;
}

Answer 3

:) 首先，你的问题的父母是什么？

只需在你的css中添加：

yourparent input
{
    font-weight:regular /* Just set a value like your parent of input*/;
}

Answer 4

为什么不将固定宽度设置为粗体输入？

http://jsfiddle.net/pBXbY/