CODEWITHSUNDEEP
htmlcssinternet-explorer
Biby Cheriyan
Biby Cheriyan

Reputation: 93

IE style issue for select option have both selected and disabled attribute

I have an issue select box on ie only. If it have both the attribute selected and disabled together it breaks the default style. Is it have any solution for this problem?

enter image description here

Click on image for a larger version of the image.

Example code is attached with this description.

<select>
    <option value="volvo" selected disabled>Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

Upvotes: 0

Views: 1211

Answers (1)

Mihai T
Mihai T

Reputation: 17687

they only workaround i could think of was to change the background-color of the disabled option to the default background-color a disabled button has, which is #f4f4f4

you should also add a conditional so the code will work only for IE . see here for more info > How to target only IE (any version) within a stylesheet?

option:disabled {
  background-color:#f4f4f4;
}
 <select>
  <option value="volvo" selected disabled>Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Upvotes: 3

Related Questions