CODEWITHSUNDEEP
htmlcssformsinheritancestyles
R_User
R_User

Reputation: 11082

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

Upvotes: 8

Views: 7108

Answers (4)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167212

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

Upvotes: 21

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201798

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.

Upvotes: 4

animuson
animuson

Reputation: 54757

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.

Upvotes: 1

Amaerth
Amaerth

Reputation: 178

You can use the form CSS selector to style your inputs

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

Upvotes: -3

Related Questions