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

css, forms, html, inheritance, styles

Solution

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

Problem

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.?

Original source