How to style Disabled Options in a form - css

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à Montana">Comunità 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

Answer 3

There is a way to do this with CSS only. But you need to tweak your HTML to follow some rules:
set your select to be required
disabled options need to have empty value fields: value=""
you need to style the :valid and :invalid states
Here is the markup:
<select required>
<option value="" selected disabled>Disabled default</option>
<option value="" disabled>Just disabled</option>
<option value="" >Empty but valid</option>
<option value="a-value-here">Fully valid</option>
</select>
select {
width: 500px;
padding: 10px;
}
select:invalid {
background: red;
}
select:valid {
background: green;
}
Here is the fiddle: https://jsfiddle.net/james2doyle/hw1m2cd9/
Now, when an option that is disabled and also value="", the :invalid styling will be applied. You can see that empty values are still ok.
If only select supported pattern, then we could validate with regex instead. At the time of this comment, it does not and is only supported on input "text" types.
This solution should work on IE >= 10

Answer 4

I do not think you can target an option tag using pure CSS; you can only modify a select tag.
Effort to modify a select tag.
Same effort to modify an option tag.
However, there are workarounds. See this question.

Answer 5

<select>
<option value="volvo" >Volvo</option>
<option value="saab">Saab</option>
<option value="vw" disabled>VW</option>
<option value="audi" class="colr">Audi</option>
<option value="aaa">Something</option>
<option value="ccc">Other</option>
<option value="vw" disabled>VW</option>
<option value="vvv">Apple</option>
<option value="nnn" class="colr">Mango</option>
<option value="cmmmcc">Plum</option>
</select>
option:disabled {
background: #ccc;
width: 500px;
padding: 5px;
}
option.colr {
background: red;
width: 500px;
padding: 5px;
}
Check the link
http://jsfiddle.net/W5B5p/110/

Answer 6

I used a simple hack to make disabled options grey, hopefully someone finds it useful.
<label>
<div id="disabledMask"></div>
<select id="mySelect">
<option disabled selected>Please Select</option>
<option value="foo">Bar</option>
</select>
</label>
<style>
label {
position: relative;
}
#disabledMask {
position: absolute;
background-color: #fff;
opacity: 0.5;
pointer-events: none;
width: 100%;
height: 100%;
display: none;
}
</style>
<script>
var toggleMask = function(){
var option = this.options[this.selectedIndex];
var disabledMask = document.getElementById('disabledMask');
disabledMask.style.display = option.disabled? 'block' : 'none';
};
var mySelect = document.getElementById('mySelect');
mySelect.addEventListener('change', toggleMask);
toggleMask.bind(mySelect)();
</script>
Here is a jsfiddle: https://jsfiddle.net/jhavbzcx/
Disclaimer: depending on the styling of your select you may need to style the #disabledMask so as not to overlap the dropdown arrow.

Answer 7

<select class="dropdown" name="contactMethod">
<option selected disabled>Contact method:</option>
<option class="dropdownplus"> E-mail: </option>
<option class="dropdownplus"> Website </option>
<option class="dropdownplus"> None</option>
</select>
<style>
.dropdown {
background-color: rgba(195, 0, 97, 0.1);
width: 100%;
border: 1px solid #CC0061;
border-style: inset;
color: grey;
text-decoration: none;
display: inline-block;
font-size: 16px;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
option.dropdownplus {
color: black;
}
</style>
See img https://ibb.co/d9453b

Answer 8

var select = document.getElementsByTagName("select");
for(var i = 0;i < select.length; i++)
{
var el = select[i];
var optVal = el.options[el.selectedIndex].value
el.addEventListener('change', function () {
// Using an if statement to check the class
if (optVal == "") {
el.classList.remove('not_chosen');
} else {
el.classList.add('not_chosen');
}
});
}