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>

http://stackoverflow.com/questions/1867743/can-i-style-a-disabled-control-using-css-or-script covers the problem generically, rather than just options in a dropdown. — Grant Clements, Mar 24 '13 at 18:23
I think you can't change "select" element in all browsers, but you can use some script that emulate/replace "select" element. Something like this http://www.benplum.com/formstone/selecter — Miljan Puzović, Mar 24 '13 at 18:52

Cthulhu · Answer 1 · 2016-12-22T14:58:37.757

65

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.

edited Dec 22 '16 at 14:58

answered Sep 12 '14 at 11:13

Cthulhu

5,095
7
46
58

3

Just tested in Firefox and Chrome and works on both. – Cthulhu May 23 '15 at 23:21
1

What versions are you on? Stable I'm seeing default behavior with no change. – Stefan Kendall May 24 '15 at 01:10
1

Just tested in Chrome 43.0.2357.65 m, Firefox 38.0.1 and Firefox Developer Edition 40.0a2 (2015-05-24), it works just fine. – Cthulhu May 25 '15 at 08:38
1

This doesn't work for me in Chrome too. What operating system are you on? I'm using OSX. – hattenn Jan 16 '16 at 13:34
2

Just tested in IE, Chrome and Firefox, works perfect everywhere :) – egurb Feb 04 '16 at 22:21
For the guys using OSX, can you try adding `-webkit-appearance:none;` to the above CSS, and check if it works? @StefanKendall – Cthulhu Feb 12 '16 at 11:40
2

If you run into an issue with setting the above code to white (#FFFFFF) where it goes back to using the disabled gray, try changing it to #FFFFFE. For some reason it overrides white but not 99% white. – Jon Dosmann Feb 22 '17 at 13:52

score 15 · Answer 2 · answered May 16 '19 at 10:06

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

score 5 · Answer 3 · answered May 04 '20 at 20:21

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

score 3 · Answer 4 · edited May 23 '17 at 12:34

3

I do not think you can target an option tag using pure CSS; you can only modify a select tag.

However, there are workarounds. See this question.

edited May 23 '17 at 12:34

Community

1
1

answered Mar 24 '13 at 18:24

JSW189

6,267
11
44
72

1

In Firefox the code works fine. I'm trying to found an alternative option that works with all browser. – user2195922 Mar 24 '13 at 18:58
You can target a option tag if it is disabled or you have added a class to it. I have Edited @JSW189 fiddle and updated it http://jsfiddle.net/W5B5p/110/ – gecco Jun 17 '15 at 10:32
Styling of the color, background, and width in the fiddle only works in Firefox on OSX, not Chrome or Safari. Some default styling is applied to the disabled elements, however. – Gordon Mar 10 '20 at 15:37

score 1 · Answer 5 · edited Apr 06 '17 at 16:02

<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/

You need to have required in your ` – Jack Aug 14 '19 at 14:46 — Jack, Aug 14 '19 at 14:46

score 1 · Answer 6 · answered Jun 03 '19 at 14:12

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.

score -2 · Answer 7 · answered Jan 26 '18 at 10:05

<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

Welcome to Stack Overflow! Thank you for this code snippet, which might provide some limited short-term help. A proper explanation [would greatly improve](//meta.stackexchange.com/q/114762) its long-term value by showing *why* this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you've made. — Toby Speight, Jan 26 '18 at 15:00

score -3 · Answer 8 · answered Nov 22 '16 at 18:41

-3

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');
    }
});
}

answered Nov 22 '16 at 18:41

Sadikie

1

1

What exactly is this? CSS – Rafael Herscovici Jun 03 '17 at 12:00

How to style Disabled Options in a form

8 Answers8

Linked

Related