Consistent fonts for form items
This article is written partly inspired by Nathan Smith’s article from Sonspring. The idea with his article is that most browsers by default display form items with a different style than that of the document. This is because by default, form items do not inherit the CSS rules for font-weight, font-family and font-size.
So, to add to Nathan’s article, here is the CSS that I often use to consistently style form items:
input, textarea, select{
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
Making Tables Cooperate
Tables also have inheritance turned off in some browsers. You may notice that in some browsers, your tables’ text will be larger, clunkier and not so pretty. This is also due to inheritance. Many browsers give tables their own style.
I’ve seen many designers fix this issue by wrapping spans around their table data cell elements to achieve the font they need. Rest assured folks, CSS to the rescue, we can remedy the issue by making the table also inherit the font. Just as easy as form items, we can whip up the following CSS rules:
table{
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
These little tricks always save me…
Thanks ;-)
Forms often get overlooked untill much later, like when someone says, “hey! why do these forms look like crap?” Thats good to know stuff!
Awesome. Can’t believe I never thought of this.
I don’t think this works for textareas in IE6. Have you checked it?
@Austin: For IE6, you’ll need to provide a font-family, size and weight. Unfortunately, this CSS only works for those browsers that behave well. But, the issue of unstylish forms can still be remedied in IE6.
Very good point about inheritance. I was approaching it from a different angle, of explicitly defining things, but I like your method a bit better. That being said, it could be simplified a bit more, and written like this instead:
input, select, table, textarea { font: inherit; }
@Nathan: Real good point. Also, a good question would be, by using the font shorthand for CSS, will this also inherit the line-height?
right on mang. who’s my cremepuff
@Ridlo: I think the answer would be me Ridlol.
I think it’ll inherit the line-height as well. Thanks for pointing out the obvious.
Form items do not inherit the CSS rules for font-weight, font-family and font-size.
Why is that?
I could not find anything specific about form items
within the recommendation for CSS2.
I usually drop a line like this into my CSS to cover the bases:
body, input, select, table, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }
Thanks for this site!
hifue.info
What do these styles inherit from?
It doesn’t work with IE 5, 6 and 7 :(. Someone got a hack to do this?
Was familiar with inheritance..But not with this ..Great Share..WonderFULL POSTah.
With a strict doctype, tables automatically inherit the body style.
Form fields are a bit more problematic since font-size: inherit does not work in Internet Explorer. font-size: 100% can be used as a reset rule, but you still need to set the other font properties for IE manually.
I couldn’t get this to work with IE7 & Maxthon (works in FF3) even with strict doctype declaration. It did work with font-size:100% for the input CSS. What’s the difference between 100% and inherit anyway?