Why text inside <select> / <option> list is not affected (color of "item1", "item2" is not changed) by CSS applied to parent <html> element? All <p> elements are affected!
Also, this works: <select multiple style="color:red;">
:root {
color: red;
}<p> this text is affected
<!-- but item1, item2, etc within this list are not affected! -->
<select multiple>
<optgroup label=animals>
<option value="it1"> item1 </option>
<option vslue="it3"> item2 </option>
<option> item3 </option>
</optgroup>
<optgroup label=tiran>
<option> item4 </option>
<option selected> item5 </option>
<option> </option>
<optgroup>
</select>When else same things happen and what rule shall I know about this problem?
I thought that CSS is inherited by child elements.
This SO answer means that color: CSS property shall be inherited.
P.S. It seems that <select> is considered to be a form element and form elements do not inherit any properties (for example, from such parent as <body> or <html>) - according to this SO answer, same would also apply to <input>, <button> and <textarea>
text inside
then text is red meaning that at leastinherited (?), even indirectly: ->
-> – user10777718 Mar 22 '19 at 15:20tag cannot be red by browser default. Also, default Chrome CSS has nothing like color: inherit for
- at least in this spec: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css (taken from your link: https://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements)
– user10777718 Mar 22 '19 at 15:29