option:disabled css style does not works on Chrome and Safari for MAC

Question

I can not change color for a disabled option on Chrome and Safari for MAC OSx. On firefox this code works. How can i override styles cross browser?

option:disabled {
  color: #a69474;
}

<select>
  <option value="volvo">Volvo</option>
  <option disabled value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Put that in your question also. That you tested it on a mac. — Red, Dec 06 '17 at 13:49

score 2 · Answer 1 · answered Dec 06 '17 at 13:48

2

It is working fine in chrome

option:disabled {
        color: #a69474;
    }

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option disabled value="audi">Audi</option>
</select>

answered Dec 06 '17 at 13:48

Wilson

329
2
11

Here's a [jsfiddle](https://jsfiddle.net/s7qukoa8/). It works in Chrome but not Safari or Firefox. – Alex Sep 28 '22 at 20:07

score 2 · Answer 2 · answered Dec 06 '17 at 13:54

Styling of tags is not currently supported by WebKit browsers on Mac OS X. You may find some more ideas here: Pure CSS solution to styling specific options in webkit based browsers?.

source: CSS: Dropdown option text color not working on Mac OS X

option:disabled css style does not works on Chrome and Safari for MAC

2 Answers2