How to customize the dropdown box?

  • Resolved nesiacweb

    (@nesiacweb)


    8 years, 6 months ago

    I managed to customize my form to the appearance I want it to be, however, I couldn’t find any css coding in customizing the dropdown selection box specifically. I am looking to change the design of the dropdown menu if possible. Right now, it follows the browser default (I think), and the problem is, in IE, the wordings on dropdown menu became white, which are blended with the background color. Please help.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Jess Quig

    (@jquigam)

    8 years, 6 months ago

    Hi nesiacweb,

    I took a look, and I see what you’re describing. There are 2 things happening: 1) Each browser is handling dropdowns differently (this is normal) and 2) The light text style you created for the rest of the form text is applying to these dropdown options (which might not be so much of a problem if it weren’t for that first part).

    To fix this, we need additional CSS that will specifically target the dropdown options and make that text dark:

    div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select select option {
    color: #333;
}

    This CSS should change the dropdown options to a very dark grey (will look almost black). And in case it helps, here’s WPBeginner’s tutorial on how to add custom CSS like this to your site.

    I hope this helps! 🙂

    Thread Starter nesiacweb

    (@nesiacweb)

    8 years, 5 months ago

    Thanks so much Jess, it works very well now 🙂 (thumbsup)

    Jess Quig

    (@jquigam)

    8 years, 5 months ago

    Hi nesiacweb,

    Excellent! I’m glad that worked well for you, and thanks for taking the time to let me know!

    Have a good one 🙂

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

The topic ‘How to customize the dropdown box?’ is closed to new replies.