2

In latest browser using just css is it possible to set the color of select element different when a disabled option is selected? Let me explain with an example

<select>
    <option selected="selected" disabled="disabled" value="1">Val 1</option>
    <option value="2">Val 2</option>
    <option value="3">Val 3</option>
</select>

I am looking for a solution something like

select {
    color: #000
}
select option[disabled]{
    color: #ccc;
}
select when disabled option is selected {
    color: #ccc
}

jsfiddle: https://jsfiddle.net/xsdg2sq9/

FarazShuja
  • 2,287
  • 2
  • 23
  • 34
  • I don't understand this. If you cannot select the disabled option then how are you going to change the style based on the selection? Disabled option cannot be selected. Moreover, you cannot change the css of select based on the option selected – K K Aug 20 '15 at 05:57
  • see the above example, when the page will be loaded Val 1 will be selected by default. – FarazShuja Aug 20 '15 at 06:01
  • That's because you added the selected attribute. Removing it will select the enabled options. Also, a user cannot select the disabled option – K K Aug 20 '15 at 06:03
  • see fiddle, by default a disabled option is selected. So in this case I want to show select element with color #ccc – FarazShuja Aug 20 '15 at 06:06
  • If you want that option to be selected by default, then remove the disabled attribute. Or just make the non-disabled options as default. Anyway, you cannot change the css of select based on the option selected by pure CSS – K K Aug 20 '15 at 06:07
  • Just click the jsfiddle link I provided, I want to show the select element in color #ccc because disabled option is selected. Now click on arrow see the dropdown list. Some are black some are Grey thats fine. Now when u will select black one I want to convert the select element to black. – FarazShuja Aug 20 '15 at 06:09
  • 1
    Just refer this: http://stackoverflow.com/a/16345225/2000051 – K K Aug 20 '15 at 06:11

2 Answers2

1

So far there is no way to reach parent element using pure css.

Visit CSS Selectors

I suggest you to do it easily with java Script & jQuery.

With .parent() in jQuery you can style your select as you must know.

Reply me if you need the jQuery code.

Good luck :)

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Mehrdad Pedramfar
  • 10,941
  • 4
  • 38
  • 59
0

FYI: CSS :disabled Selector:

select{
 width:250px;
    padding:15px;
    font-weight:600;
    font-size:24px;
}
select option:disabled {
    color: #CCC;
}
select[multiple=multiple]:disabled {
    background: #ffff00;
}

select {
    color: blue;
}
select option:disabled{
    color: yellow;
}
select option[selected=selected]:disabled {
    color: #000;
    background: #CCC;
}
<form action="">

<select>
    <option selected="selected" disabled="disabled" value="1">Val 1</option>
    <option value="2">Val 2</option>
    <option value="3">Val 3</option>
</select>


<select>
    <option disabled="disabled" value="1">Val 1</option>
    <option value="2">Val 2</option>
    <option selected="selected" value="3">Val 3</option>
</select>

<select>
    <option disabled="disabled" value="1">Val 1</option>
    <option value="2">Val 2</option>
    <option disabled="disabled" selected="selected" value="3">Val 3</option>
    <option value="3">Val 3</option>
    <option disabled="disabled" value="4">Val 4</option>
    <option selected="selected" value="5">Val 5</option>
</select>

</form>
Tom Smith
  • 51
  • 6