0

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>
krlzlx
  • 5,752
  • 14
  • 47
  • 55
Biby Cheriyan
  • 93
  • 13
  • what do you mean it breaks the default style ? you refferening to the style the option has in IE ? each browser has different styles for elements such as `select` dropdowns. a selected and disabled option has a blue background over it + a grey-ish color. these 2 together end up looking like your picture in IE. it looks different from other browsers because each browser is different. you can't control these things – Mihai T May 22 '17 at 08:48
  • usually option which selected have a blue background. but both selected and disabled together breaks the text clarity. You can refer the attached image. or try the above code in ie. It show the difference. Can you please suggest a way to avoid this style. – Biby Cheriyan May 22 '17 at 09:08

1 Answers1

3

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>
Community
  • 1
  • 1
Mihai T
  • 17,254
  • 2
  • 23
  • 32