Search code examples
htmlcssformsinheritancestyles

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


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


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