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

Answer 1

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 2

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

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

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 6

<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