Menu
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.?
517
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" />If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
