0

This is a wonderful question about why styles do not get inherited in form fields. This is a wonderful answer that explains "Certain controls are not defaulted to inherit font settings."

Is there a specification about this? "Certain controls" seems vague to me.

I checked

Xaver Fleer
  • 385
  • 1
  • 2
  • 12
  • did you read the first answer there? it's OS related – Temani Afif May 31 '20 at 09:16
  • Shure. The answer explains how the elements are styled but not, where the rules are specified. – Xaver Fleer May 31 '20 at 11:24
  • 1
    it depends on the OS/device/Browser. It's not defined in the CSS. You need to see the implementation/code of each browser to find this. CSS tells you which property is inherited and which is not – Temani Afif May 31 '20 at 11:46
  • Do you mean, the browser implementations are not conform with the spec? The spec says: inherit the property (e.g. font-size) and the browser implement something different (the OS default). – Xaver Fleer May 31 '20 at 12:38
  • 1
    from the other question: *By default, browsers render most form elements (textareas, text boxes, buttons, etc) using OS controls or browser controls* --> these are special elements rendred by the browser so the browser is free to control them and this doesn't mean they are not conform with the Spec. There is nothing in the Spec that prevent a browser to apply its own styles. – Temani Afif May 31 '20 at 12:42
  • What confuses me is that the spec says the font-size property gets inherited (https://mzl.la/2XLwXnN). Shouldn't this prevent a browser to apply its own styles? – Xaver Fleer May 31 '20 at 13:04
  • 1
    no, this is the default behavior. If you don't set any font-size THEN it get inherited. The spec doesn't say it should be inherited and you should not set a font-size. It's like you do `p{font-size:20px}`. Is this a Spec violation? no, you simply set an explicit font-size. – Temani Afif May 31 '20 at 13:09
  • Right, got it! Thank you for your patience. – Xaver Fleer May 31 '20 at 13:19
  • If you feel like adding a short answer, I'm happy to accept it. – Xaver Fleer May 31 '20 at 13:21

1 Answers1

1

The answer to your question is pretty simple and it's not related to the specification. If you take the example of a textarea inside Google Chrome and inspect the element you will get the following:

enter image description here

The browser is applying a default font-family (and many other properties) so the inherit rule no more apply.

Now if you want to know how these default style are defined you need to consider each browser and its implementation since this is out of the scope of the CSS specification.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415