How to Style Selected Option Color Separately from Disabled Option

Changing the text colour of a selected disabled option

This is a my idea for your problem, try this

$(document).ready(function(){   $('#MySelect').val('Zero').change();   });

$('#MySelect').on('change',function(){   $($(this)).css("color", $(this).find("option").css('color','black'));      var color = $(this).find("option[value="+$(this).val()+"]").attr('optioncolor');   $($(this)).css("color", color);   $($(this)).css("color", $(this).find("option[value="+$(this).val()+"]").css('color',color));});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <select id="MySelect">   <option value="Zero" selected optioncolor="red" >Zero</option>   <option value="One" optioncolor="green">One</option>   <option value="Two" optioncolor="yellow">Two</option> </select>

Change background color of default (disabled) selected option

To solve this issue without scripting you can't use disabled for your default option. Use hidden instead:

body {
  background: #41608c;
}
select {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 16px;
  width: 300px;
  height: 64px;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  margin-top: 1px;
  color: rgba(255, 255, 255, 1);
  appearance: none;
}
select option {
  background: rgba(46, 61, 87, 1);
}

<body>  
  <select>
    <option selected hidden>Default value</option>
    <option>Value 1</option>
    <option>Value 2</option>
  </select>
</body>

Styling disabled select in Chrome

It seems to be working just fine using Chrome 15.

input[disabled] {
  color: #933;
  background-color: #ffc;
}

Make sure you´ve cleared any cached style sheets.

Created a jsFiddle.

UPDATE

Noticed your question title and updated the example.

It´s seems to be a known issue for Chrome in Windows, see Style disabled multiple select – google chrome

How to style the option of an html select element?

There are only a few style attributes that can be applied to an <option> element.

This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.

There are replacement plug-ins/libraries that look like a <select> but are actually composed of regular HTML elements that CAN be styled.

How to Style Selected Option Color Separately from Disabled Option

Changing the text colour of a selected disabled option

Change background color of default (disabled) selected option

Styling disabled select in Chrome

How to style the option of an html select element?

Related Topics

Leave a reply