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.

    
    &l         


        

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

You can use the form CSS selector to style your inputs

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