120

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?

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
Judy R
  • 1,201
  • 2
  • 8
  • 3
  • it's very sad they dont. I guess the W3C had decided it would be better to leave them to be styled as the system's default rather than forcing their own broswer styling on them – vsync May 29 '13 at 08:48

5 Answers5

148

It does not inherit by default but you can set it to inherit with css

input, select, textarea, button{font-family:inherit;}

demo: http://jsfiddle.net/gaby/pEedc/1/

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • font property automatic inherit if it is not mentioned, see here : https://developer.mozilla.org/en/CSS/font – xkeshav May 21 '11 at 08:16
  • 5
    @diEcho, this is true for all elements besides form elements, which inherit from the current system styling so they maintain a feel that is familiar to the user (*by default*), but they are manually overridable. – Gabriele Petrioli May 21 '11 at 08:27
  • 1
    Wrong or not, what Firebug was showing me was very confusing: font size 12, but computed it still became 13.3333. After setting font-size to inherit analogous to Gaby's answer my problem was solved :O – Jeroen May 27 '11 at 13:19
  • @Gaby It is always so good that the designers make all the thinking for us developers... ;) – AGuyCalledGerald Mar 30 '12 at 14:09
  • Also if you put the `input` inside `label`, the `label` tag doesn't inherit default css – AmerllicA May 22 '17 at 08:50
  • Add `option,` to this list? That controls the individual options in a drop-down selection. – Bob Stein Aug 08 '17 at 13:17
16

Form items (inputs/textarea/etc) don't inherit font information. You'll need to set the font-family on those items.

John Green
  • 13,241
  • 3
  • 29
  • 51
  • @jhon wat ever u r saying may b true, is there any standard/valid document regarding this?? – xkeshav May 21 '11 at 08:11
  • font elements also doesn't inherit color, background and so on. Actually, font elements are the most unreliable thing in the whole html/css! You cannot specify a width for an input box and guarantee will be the same across all browsers! – Ionuț Staicu May 21 '11 at 08:17
  • I mean form elements. Still sleepy :) – Ionuț Staicu May 21 '11 at 08:29
  • @diEcho - Honestly, I did a search through the specs, and don't see it called out anywhere. Looking over at 'Related', and SO is giving me a duplicate question link: http://stackoverflow.com/questions/2874813/ (which gives my answer, although also with no spec links). The default stylesheet in Chrome lists the font as "-webkit-small-control;", which means it is already overriding body, therefore is more specific than anything set on body. The same goes for TD elements, if I'm not mistaken. So I don't know what to say other than "that's just how it is." : ) – John Green May 21 '11 at 09:18
5

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.

Stoutie
  • 1,944
  • 1
  • 21
  • 17
-1

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"}} />

rpd1297
  • 7
  • 1
-1

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

ToyChicken
  • 185
  • 3
  • 12