Change Font Colour in Dropdown

Hello,
On this page: https://websitesforhippies.com/contact/
I'm trying to get the text in the dropdown selector to be white instead of black.

I can't get the selector(s) correct.

Please advise.

Thanks in advance,
Casper

  • Ken Kimbrell

    Hello Casper-

    The primary practice of changing colors of the selected option, is to add a class to the markup, if you are unable to gain access to the HTML markup of the selections, due to the use of a plugin that is generating the form. There is a work around, you could try this:

    /*
     * Grab the ID of the  Select dropdown
     * Override the set styles with !important
    */
    #wpforms-17590-field_8 {
    
        color: #fff !important;
        font-size:16px !important;
    
    }
    
    /*
     * Unfortunately it changes the text for all the options
     *  We have to find non-checked options and set the text to #000
    */
    #wpforms-17590-field_8 option:not(:checked){
    
       color:#000 !important;
       padding:5px !important;
    
    }
    
    /*
     * Again we come into another problem
     *  Now the option that is checked in the dropdown
     * is white as well :(
    */
    #wpforms-17590-field_8 option:checked{
    
       color:#000 !important;
    
    }
    
    /*
     * It appears they are using an image, instead of an icon for the
     *  arrow icon, you would have to replace it with a white one.
    */
    
    #theme-page select, .woocommerce select {
    
      background: url(/wp-content/themes/jupiter/assets/images/selectbox-arrow.png) right center
      no-repeat;
    
    }

    I also recommend adding this custom CSS to your Child Theme's style.css or utilizing a custom CSS plugin like SIMPLE CSS . You may find that the use of the !important rule may not be necessary and it will protect your styles from being erased during any future update.

    Let me know how this works for you!

    Take Care,

    Ken - WPMU DEV Support