How to get button to inherit color

Issue

Color inheritance doesn't seem to work for button.

<div style='color:blue'>
    <button>
        hi
    </button>
</div>

When I debug the above code, I see that the button inherits the color "blue" from div. However, it is still rendered as black.

If I set the button's color to blue directly, it renders blue as expected.

How do I get color inheritance to work for button?

jsfiddle here.

Solution

See this fiddle

You can add color:inherit to the button. Thus add this to your css as below..

CSS

button{
    color: inherit;
}

As in the docs

The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element. It is allowed on every CSS property.

Answered By - Lal