2

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

input {
    font-weight: bold;
}

使用这个 HTML：

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

导致了一个直接的问题：现在所有的输入框都太宽了。

注意多余的空格

我已将其范围缩小到 Yahoo 重置，它告诉输入框font: inherit来自父级（文档正文）。这是我想要的行为——输入框与父正文具有相同的字体。但是一旦我指定字体，或者使用继承，输入框又太宽了。这在 IE 和 Firefox 中是一样的，所以它可能不是浏览器兼容性问题。

看看它在行动：http: //jsfiddle.net/clintp/bZChP/3/

如何为输入框指定字体，但要适当调整它们的大小？

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

4

4 回答 4

2

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

输入 { 字体：100% Lucida 控制台，等宽；}

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

关于输入框与父体字体相同的要求，那么您也需要在父体中使用等宽字体。☺ 说真的，虽然我们也应该能够使用比例字体设置输入字段的宽度，但事情就是行不通。即使是支持该ch单位的浏览器（如果它工作的话，这将是数字输入的问题）不一致且不正确地执行此操作，因此width: 10ch即使对于输入 0000000000，设置 eg 也不会提供正确的呈现。

于 2012-10-10T16:34:22.627 回答
0

创建一个调整字体大小和粗细的 CSS 类。在您希望设置样式的输入中使用该类名。

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

.bold {
    font-weight:bold;
    font-size:10px;
}
于 2012-10-10T15:14:34.630 回答
0

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

http://jsfiddle.net/pBXbY/

于 2012-10-10T15:58:27.603 回答
0

:) 首先，您在问题中输入的内容是什么？

只需将其添加到您的 css 中：

yourparent input
{
    font-weight:regular /* Just set a value like your parent of input*/;
}
于 2012-10-10T15:22:30.087 回答