Styling Form Dropdown for Usability?

  • mikaselm

    (@mikaselm)


    8 years, 10 months ago

    Hello, all. I’m trying to get WooCommerce up and running on my site so that I can stop redirecting visitors back to other shopping carts. I’ve had pretty good luck so far, with a combination of the standard install and the ability to add custom css to my theme. Where I’m running into issues is with the “State” drop down on my shipping form here:

    https://space-jewelry.com/test-checkout

    The currently selected state shows up in a dark grey, but all other states show up in white text on a white background. I inspected the element and tried to grab the relevant classes, but nothing I do seems to effect the color of those options. Can anyone lead me right on this?

    Thank you!!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter mikaselm

    (@mikaselm)

    8 years, 10 months ago

    Just for a little further info, other WooCommerce generated options (product variations, for example) look great. White background, black text.

    Thread Starter mikaselm

    (@mikaselm)

    8 years, 10 months ago

    Screenshot here: https://www.screencast.com/t/McTdtfLiAC

    HudsonValleyWebDesign

    (@jaycbrf)

    8 years, 10 months ago

    body, .widget-area .widget a {
    color: #ffffff;
    }

    that rule is making all the text in the body white including the select options.

    remove body from the rule and style the elements color individually.

    Thread Starter mikaselm

    (@mikaselm)

    8 years, 10 months ago

    Thank you! How do I go about removing that rule? If I put it into my custom CSS section like this:

    .body, .widget-area .widget a {
    color: #000000;
    }

    The only thing that turns black is the text in my widgets. It doesn’t seem to effect the body of the page at all. Weirdly, if I inspect the element in chrome, and change that color there, it does effect everything.

    Thread Starter mikaselm

    (@mikaselm)

    8 years, 10 months ago

    Ah ha, I’ve discovered it and I ‘m leaving the answer here just in case it helps someone else:

    .select2, .select2-container, .select2-container–default, .select2-container–below, .select2-container–open {
    color: #000000!important;
    }

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Styling Form Dropdown for Usability?’ is closed to new replies.

Tags