Question

The powers that be have asked for the input fields on some of our forms to have bold text. The problem is that the naive way of doing this in the style sheet:

input {
    font-weight: bold;
}

Using this HTML:

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

Caused an immediate problem: now all of the input boxes are too wide.

I’ve narrowed it down to the Yahoo reset which tells the input boxes to font: inherit from the parent (the document body). This is the behavior I want — the input boxes to have the same font as the parent body. But as soon as I specify the font, or use the inherit, the input boxes are too wide again. This is the same in IE and Firefox, so it’s probably not a browser compatibility problem.

See it in action: http://jsfiddle.net/clintp/bZChP/3/

How do I specify the font for the input boxes, but have them sized appropriately?

Update: “Appropriately” http://jsfiddle.net/clintp/bZChP/5/ The input widget on the right is sized appropriately for its data, the one on the left is not. The goal is to have both boxes with the same sizing, same text font [with one being bold!], without having to specify the box size for each and every input box in the application field by field. (There are thousands.)

Answer 1

You cannot, in practice, size input fields reliably unless you use a monospace. Even for monopace fonts, browser have bugs in calculating the field width. The most consistent results are probably achieved if you set the visible width in HTML only, with the the size attribute, and you set the font size and family in CSS, listing down monospace fonts that seem to work OK. E.g.,

input { font: 100% Lucida Console, monospace; }

This would address the problem that on some browsers, e.g. <input size=10> results in a field that is about 12 characters wide.

As regards to the requirement that input boxes have the same font as the parent body, well, then you need to use monospace font in the parent too. ☺ Seriously, although we should be able to set the width of an input field using a proportional font, too, things just don’t work. Even browsers that support the ch unit (which would the issue for numeric input, if it worked) do that inconsistently and incorrectly, so that setting e.g. width: 10ch does not give correct rendering even for the input 0000000000.