Why Are CSS-Styles Not Inherited by HTML Form Fields

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

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

CSS not inheriting parent class properties

I assume you want your 'next' and 'previous' buttons to inherit these properties:

.scViewer .buttonContentPane {
  padding: 5px 5px;
  color:#FFFFFF;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}

Unfortunately (for you), not all properties are inherited by an element's children/descendants, and not all elements will inherit from their parents/ancestors. You're experiencing both problems.

• Padding, border-radius, and box-shadow aren't automatically inherited: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
• Color usually is inherited but buttons are form elements, and form elements don't inherit properties from their parents: Why are CSS-styles not inherited by HTML form fields?

You'll need to either directly add the class to the buttons if you want them to be styled correctly (as you mentioned you did in your question), or you'll need to write rules in your CSS that explicitly state the buttons should inherit properties from their parents.

The following is a simple example showing how to explicitly tell an element to inherit properties from its parent. Click "Run code snippet" to see the resulting buttons.

.wrapper1,.wrapper2 {  color:red;  padding: 20px;  box-shadow: 0 0 3px rgba(0,0,0,0.4);  border-radius: 10px;  margin: 10px;  width: 100px;}
.wrapper2 button {  color: inherit;  padding: inherit;  box-shadow: inherit;  border-radius: inherit;  border: none;}

<div class="wrapper1">  This button doesn't inherit.  <button>My button</button></div>
<div class="wrapper2">  This button does inherit.  <button>My button</button></div> 

textarea doesn't inherit css color form parent element

Textarea will not inherit until you mark it so

.c1 textarea{
    color:inherit;
}

So you can apply color for both div child and textarea fields. If I am not mistaking input tag also does not inherit color by default

Why is 'font-family' not inherited in 'button' tags automatically?

Form elements don't inherit font settings, you have to set these properties manually.

If you use font declaration for eg. body,

body {font-family: arial, sans-serif}

use just

body, input, textarea, button {font-family: arial, sans-serif}

or

input, textarea, button {font-family: inherit}

Why input Does Not Inherit Color?

It's your user agent stylesheet which is overriding the color setting on the input.

Here are the input rules from Chrome's user agent stylesheet:

Note the rule:

input {
    color: -internal-light-dark(black, white);
}

This is more specific than your color rule, so overrides it.

Browsers are free to implement whatever they want in their own stylesheets, so this depends from browser to browser.

You can read more here

How do I prevent CSS inheritance?

As of yet there are no parent selectors (or as Shaun Inman calls them, qualified selectors), so you will have to apply styles to the child list items to override the styles on the parent list items.

Cascading is sort of the whole point of Cascading Style Sheets, hence the name.

---

Related Topics