Link to home
Start Free TrialLog in
Avatar of frasierphilips
frasierphilips

asked on

IE11 CSS styling issue with select tags

Does anyone know why the font colour of a CSS styled select tag is displaying correctly on all other browsers except IE11?  It should be white, it's coming out as dark grey.  As well as the style being applied to the select tag, I've tried applying the same style to the disabled version of the tag and also to the option tag.
Avatar of Adam the 32-bit Aardvark
Adam the 32-bit Aardvark
Flag of Poland image

That's the lovely thing about IE - if the code breaks anywhere, it is usually the good old Internet Explorer - that's what makes it the best browser for testing your code.
I am not sure what might be causing the color change in this particular case, but you should be able to find out by right-clicking the affected element and choosing Inspect element. There might be some default styles which you need to change, or the element inherits styles differently in IE.
Please share if you find anything interesting, (or if there is nothing helpful in there).
Styles of controls are controlled by the browser - the extent to which you can style them is dependent on the browser in question.

That's why we have plugins that provide controls that look styled selects but are actually made up using other elements.

For example

https://silviomoreto.github.io/bootstrap-select/examples
Avatar of frasierphilips
frasierphilips

ASKER

I've discovered that the issue is down to the fact that the select is disabled, which it needs to be, thus IE11 is greying the text out.  I've scoured the internet for a fix however the :disabled pseudo class doesn't seem to work.  I've tried a couple of variants specifically for IE11 and they don't work either.
Please see my last post. Controls are not always stylable - the extent to which they are (and how they present themselves) varies across browsers.
I saw your last comment however I've also seen several contradictory posts elsewhere
I've also seen several contradictory posts elsewhere
Well then those posts should have given you your answer then.
Yes, that's a sure source of reliable information, several contradictory posts on the same topic....
Unfortunately it's a block on IE, and I believe specifically 11.  The selector is fine and accurate, IE11 simply won't let you change the disabled color, but only for selects.  For disabled text, button etc... :disabled works fine, just not on selects.
[disabled] or even inline styling is also blocked.  No idea why select boxes are always such an issue.

Both edge and I believe previous IE versions allow it, but not 11.
If it's going to be disabled for the life of that page (ie rendering disabled from the server), a lot of the time I'll put in a disabled text field in it's place, which does abide by the styles.
Also, just so you know (though I can't imagine it will help you), it's "one or the other" for background and foreground colors on this select issue.
If you don't change the background from it's default, THEN it will let you change the foreground.  As "logical" as that is.
Yes, that's a sure source of reliable information, several contradictory posts on the same topic....

It has been stated here that you cannot change the style because of a browser limitation.
You claim other posts say it is possible - but then you claim they are contradictory.

My advice is - find a post that says it is possible and go with that - if that does not work then maybe accept that what has been said above is the right answer.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.