I used to be able to use styles like the ones below – they worked just fine. However, in newer browsers, neither the positioning nor the cursor styles seem to work. I can only change color. What’s the story on this? Is there a workaround?
I don’t have a Code Pen account but can get one if necessary. I just thought maybe someone would know right off if styling options based on value was still possible and/or if there’s a workaround. You can still do color – but not margin, padding or cursor.
I also haven’t checked this in an older browser emulator to make sure it’s a browser issue. I just know this type of styling used to work in an app I’m building and it doesn’t now.
I’m at work – don’t have time to set up a proper demo but will do so later.
Ok, here’s the Pen for this. I added an h1 and a div just so I could make sure things were working but the part I’m interested in is whether or not there’s a way to style the options with the value attribute. It worked great in older browsers but doesn’t seem to have any effect in newer ones. Sometimes I can get a color style to work but I tried adding color to several of these and even that isn’t working.
What I’m trying to accomplish is that many of our dropdown options have links in them. I’d like to have them styled like other links in the site so they’re easily recognizable by users.