Mantontorge
New Member
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:\[code\]input { font-weight: bold;}\[/code\]Using this HTML:\[code\]1234567890<input type="text" maxlength="10" size="10" value="http://stackoverflow.com/questions/12822701/1234567890"/>\[/code\]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 \[code\]font: inherit\[/code\] 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?