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.?
4 answers
solution1
20 ACCPTED 2012-06-28 17:54:47
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" />
solution2
3 2012-06-28 19:02:32
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, eg
* { font: 100% Calibri, sans-serif; }
You can easily override this for specific elements when desired, since the universal selector has very low specificity.
solution3
0 2012-06-28 17:56:40
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.
solution4
-3 2012-06-28 17:56:17
You can use the form CSS selector to style your inputs
form{
font-family: sans-serif;
color: #EEEEEE;
font-size: 22pt;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.