Why are CSS-styles not inherited by HTML form fields?

Question

I want to set the font-style and font-size of the text in my HTML document.

<html>
<head>
    <title>Style inheritance</title>
    <style type="text/css">
    <!--
    body    {
            background-color: #000000;
            font-family: sans-serif;
            color: #EEEEEE;
            margin: 0;
            font-size: 22pt;
    }
    -->
    </style>

</head>
<body>
    test text
    <form>
        <input type="text">
    </form>
</body>
</html>

I once learned, that each HTML element inherits the style properties of its parent element. In my case, all child elements of body should have the size 22pt.

But why does this not work for input, select, textarea, etc.?

score 20 · Accepted Answer · edited Jun 18 '20 at 06:19

input, select, textarea button - They do not inherit by default but you can set it to inherit with css

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

Live Demo: http://jsfiddle.net/rvjKE/

body {
  font-family: courier;
}

input {
  width: 250px;
}

input.inherit {
  font-family: inherit;
}

<div>simple text should be courier</div>
<input type="text" value="input text - does not inherit" /><br/>
<input type="text" class="inherit" value="input text - inherit from css" />

score 3 · Answer 2 · answered Jun 28 '12 at 19:02

An element inherits a property only when no style sheet sets that property on the element (or when the value inherit has been set). Form fields generally have settings for them in browser style sheets.

So you need to explicitly set properties on them to override the browser defaults. You can do this with the universal selector * if you want all elements to have some properties, e.g.

* { font: 100% Calibri, sans-serif; }

You can easily override this for specific elements when desired, since the universal selector has very low specificity.

score 0 · Answer 3 · answered Jun 28 '12 at 17:56

This is because they are user interface elements which by default take the look and feel of the user's operating system. At least, they used to. Nowadays different browsers use different default styles, but they generally tend to be very similar.

Anyways, the idea is to allow website owners to modify the look around the interface elements while still maintaining the user's default look of the input elements. Forcing you to change the styles separately is the only way to do that.

score -3 · Answer 4 · answered Jun 28 '12 at 17:56

-3

You can use the form CSS selector to style your inputs

form{
    font-family: sans-serif;
    color: #EEEEEE;
    font-size: 22pt;
}

answered Jun 28 '12 at 17:56

Amaerth

178
2
13

Why are CSS-styles not inherited by HTML form fields?

4 Answers4

Linked

Related