Skip to main content

Forums

This topic contains 7 replies, has 2 voices, and was last updated by  susanlitton 1 year ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #268175

    susanlitton
    Participant

    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;
    }

    #268176

    Paulie_D
    Moderator

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

    #268178

    susanlitton
    Participant

    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.

    #268179

    Paulie_D
    Moderator

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

    #268180

    susanlitton
    Participant

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

    #268211

    susanlitton
    Participant

    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.

    #268236

    Paulie_D
    Moderator
    #268274

    susanlitton
    Participant

    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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star