Why Does Not Inherit Color?

Question

I have the HTML below. In order to get green text in the text input I have to inherit the color from the parent <span>; otherwise, the text input would have black text. Why is this necessary? Why doesn't the input element just inherit the color property from its parent?

Are there other other elements that don't inherit properties from their ancestors?

<p>Without color: inherit;</p>
<div style="color: darkgreen;">
    <input type="text" value="Displays black" />
</div>

<p>With color: inherit;</p>
<div style="color: darkgreen;">
    <input type="text" style="color: inherit;" value="Displays green" />
</div>

Sounds quite broad to make an extensive list, but textarea and anchors **with `href`** do that too. — Kaiido, Jan 18 '21 at 02:24
because input elements ( as many others ) have a default style — Mister Jojo, Jan 18 '21 at 02:25

score 4 · Accepted Answer · answered Jan 18 '21 at 02:23

It's your user agent stylesheet which is overriding the color setting on the input.

Here are the input rules from Chrome's user agent stylesheet:

Note the rule:

input {
    color: -internal-light-dark(black, white);
}

This is more specific than your color rule, so overrides it.

Browsers are free to implement whatever they want in their own stylesheets, so this depends from browser to browser.

You can read more here

score 1 · Answer 2 · answered Jan 18 '21 at 02:24

CSS applies styles based on the cascade, specificity, and inheritance.

In short, browsers have a style sheet (check out @Joundill's answer) that they apply before applying any site styles and it probably includes something like:

input {
  color: black;
}

This style takes preference over your inline style on the parent span.

Look into applying a CSS reset to reset the browser style sheet.

Why Does Not Inherit Color?

2 Answers2