<input> doesn't inherit the font from <body>
CssCss Problem Overview
I have input and label fields:
<label class="adm" for="UserName">User name</label>
<input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />
and CSS:
body,html { font-family: Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; color: #111;}
label.adm { font-size:0.9em; margin:0 0 3px 3px; display: block;}
input.adm { font-size:0.9em; margin:0 0 3px 3px; }
When the code opens up in Firefox the fonts are not the same. Firebug shows that both "should" inherit and when I look at computed it shows the label uses Verdana. However the input shows it uses "MS Shell Dlg".
Can anyone explain what's happening and why it doesn't seem to obey the normal CSS rules?
Css Solutions
Solution 1 - Css
It does not inherit by default but you can set it to inherit with css
input, select, textarea, button{font-family:inherit;}
Solution 2 - Css
Form items (inputs/textarea/etc) don't inherit font information. You'll need to set the font-family on those items.
Solution 3 - Css
Three years later, I'm finding it strange <input> elements of types reset, submit, and button don't inherit font-family in Chrome or Safari. I discovered they would not receive padding either.
But when I mess with certain properties, like background, border, or this strange appearance property, then font-family and padding have effect, but the native look and feel of the button is lost, which is not a problem if you are completely restyling the buttons.
If you want a native looking button, with inherited font-family, use the <button> element instead of <input>.
See Codepen.
Solution 4 - Css
I've had the same problem. What worked for me was adding the style directly to the input element in the html. I'm coding in React fyi.
<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />
Solution 5 - Css
This question is 10 years old, and some people coming to this recently may find that adding the right <meta> information at the top of the HTML page will fix similar issues experienced on mobile devices - try:
<meta name="viewport" content="width=device-width, initial-scale=1">
MDN has a good guide to what the viewport meta information does