How to style Disabled Options in a form

Question

I'm using a form with a drop-down menu that contains some options disabled, so the users cannot select them. I'm trying to customize via css these elements but I have some problems with Chrome and IE7/8/9/10.

HTML:

<div class="formBody">     <select  name="form[categoria][]"  id="categoria"  class="rsform-select-box">       <option selected="selected" value="">Scegli una categoria</option>       <option disabled="disabled" value="">Impresa </option>     </select>     <span class="formValidation">         <span id="component50" class="formNoError">Scegli una categoria</span>     </span> </div> 

CSS:

select option[disabled] { color: #000; font-weight: bold } 

This code works only with Firefox and doesn't work with Chrome and IE (all version).

Any idea to solve this problem?

---

Below the html code for select-box

<div class="formBody"><select  name="form[categoria][]"  id="categoria"  class="rsform-select-box" ><option selected="selected" value="">Scegli una categoria</option><option disabled="disabled" value="">Impresa </option><option  value="Servizi">Servizi</option><option  value="Informatica">Informatica</option><option  value="Commercio">Commercio</option><option  value="Telecomunicazioni">Telecomunicazioni</option><option  value="Editoria/Stampa">Editoria/Stampa</option><option  value="Meccanica/Elettrica">Meccanica/Elettrica</option><option  value="Alimentare">Alimentare</option><option  value="Chimica/Farmaceutica">Chimica/Farmaceutica</option><option disabled="disabled" value="">Edilizia </option><option  value="Tessile/Moda">Tessile/Moda</option><option  value="Mobili/Arredamenti">Mobili/Arredamenti</option><option  value="Alberghi/Ristoranti">Alberghi/Ristoranti</option><option  value="Trasporto/Logistica">Trasporto/Logistica</option><option  value="Finanza">Finanza</option><option  value="Altro">Altro</option><option disabled="disabled" value="">Professionista </option><option  value="Commercialista">Commercialista</option><option  value="Ragioniere">Ragioniere</option><option  value="Notaio">Notaio</option><option  value="Tributarista">Tributarista</option><option  value="Avvocato">Avvocato</option><option  value="Consulente del lavoro">Consulente del lavoro</option><option  value="Altro">Altro</option><option disabled="disabled" value="">P.A. Locale </option><option  value="Regione">Regione</option><option  value="Provincia">Provincia</option><option  value="Comune">Comune</option><option  value="Comunit&agrave; Montana">Comunit&agrave; Montana</option><option  value="ASL">ASL</option><option  value="CCIA">CCIA</option><option  value="Altro">Altro</option><option disabled="disabled" value="">P.A. Centrale </option><option  value="Associazione di categoria">Associazione di categoria</option><option  value="Privato">Privato</option><option  value="Altro">Altro</option></select><span class="formValidation"><span id="component50" class="formNoError">Scegli una categoria</span></span></div> 

Answer 1

What you're looking for is this:

select option:disabled {     color: #000;     font-weight: bold; } 

Here, have a fiddle.

Attention: according to reports on the comments section, this solution does not work on OS X.

Answer 2

I used :invalid to solve my issue, description below:

So these answers do style the disabled option but only within the dropdown. Not if you wanted to display the disabled option at the top of the list as a "Please select".

Hope this helps others having a similar issue to what I had.

Basically, the select needs to be a required field for this to work:

<select required> 

Assuming the option is at the top of the list:

<option disabled selected value="">Please select</option> 

And your SCSS looking something like this:

select {    // The select element is set to required   // as long as the selected options value   // is empty the element is not valid.   &:invalid {     color: gray;   }    // Styling for browsers which do support   // styling select option elements directly   [disabled] {     color: gray;   }    option {     color: black;   } } 

So it's the :invalid which allows us to colour the disabled selected option.

Thanks to Markus Oberlehner for his post:

Blog post: https://markus.oberlehner.net/blog/faking-a-placeholder-in-a-html-select-form-field/

Codepen: https://codepen.io/maoberlehner/pen/WOWrqO