Styling select options by value for positioning and cursor

[susanlitton]

Hi all,

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?

Here’s what used to work:

#view_sessions_participant_select option, #participant_select option {
margin-left:15px;
}

#view_sessions_participant_select option[value=”all”], #view_sessions_participant_select option[value=”0″], #participant_select option[value=”-1″], #participant_select option[value=”0″] {
margin-left:3px;
}

#view_sessions_participant_select option[value=”all”] {
color:#d26d13;
cursor:pointer;
}

[Paulie_D]

Without the actual code in a minimal demo we can’t really comment.

[susanlitton]

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.

Thanks.

[Paulie_D]

You don’t need a full account with Codepen, it’s free to use.

[susanlitton]

Ok, great. I’ll work up a demo when I get off work. Thanks for the info.

[susanlitton]

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.

https://codepen.io/susanlitton/pen/mxVJwe

[Paulie_D]

Seems it’s not possible any more

https://stackoverflow.com/questions/16344583/style-select-element-based-on-selected-option

[susanlitton]

That’s what I was afraid of, but it’s a real shame. It’s such a userful thing to be able to do to improve user experience and was nice to do it with CSS.

[Author]

Posts