CODEWITHSUNDEEP
cssforms
user2195922
user2195922

Reputation: 519

How to style Disabled Options in a form

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>

Upvotes: 45

Views: 134022

Answers (9)

Bram
Bram

Reputation: 3264

You can use the :has() to check for a disabled option.

select:has(option:disabled:checked) {
  color: lightgray;
}

Upvotes: 2

james2doyle
james2doyle

Reputation: 1429

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

Upvotes: 4

Joe
Joe

Reputation: 71

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.

Upvotes: 1

MayhemBliz
MayhemBliz

Reputation: 227

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

Upvotes: 15

Chris
Chris

Reputation: 1

<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

Upvotes: -2

gecco
gecco

Reputation: 281

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

Upvotes: 1

Cthulhu
Cthulhu

Reputation: 5235

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.

Upvotes: 65

Sadikie
Sadikie

Reputation: 1

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

Upvotes: -3

JSW189
JSW189

Reputation: 6325

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.

Upvotes: 3

Related Questions