CSS issue/bug in the Pro Sites signup form drop-down menu

Hello,

I've installed Pro Sites on our site, and we're having a real problem with the way it displays drop-downs in the signup form:

http://anchorgiving.com/start/?action=new_blog

Click on any of the "Sign Up" buttons in the price table and you'll see what I mean under "Cause Categories." The drop-down menu is totally blank unless you hover your mouse over the selection. It's this way on iOS Safari and Windows Firefox and Chrome.

I've tried to create custom CSS for the class of the drop-down menu selections in our theme's style sheet to no avail. We are using the TA-Pluton theme, but we actually ran into the same problem when we tested it on Twenty Fifteen and disabled every plugin but that one - something about the way that plugin styles the drop-down menu makes it not play well with other style sheets.

Can you help with how to make that text visible? Thank you.

  • Michael Bissett

    Hey Blake, thanks for your patience here! :slight_smile:

    On that "Reserve Your Site" button, putting in more padding on the top would require something like this:

    #prosites-signup-form-checkout #check-prosite-blog {
        margin-top: 15px;
    }

    And adding in a color scheme (I'm assuming you're aiming to have it like the Sign Up buttons above) would require something like this:

    #prosites-signup-form-checkout #check-prosite-blog {
        margin-top: 15px;
        background: #2ed565;
        color: white;
    }
    
    #prosites-signup-form-checkout #check-prosite-blog:hover {
        background: #177c4d;
    }

    A handy tool for cooking up CSS customizations like this would be the code inspector inside your browser. I use Google Chrome when it comes to cooking up these code snippets, so it'd be the Chrome Developer Tools, we've got a handy article over here on the use of those:

    https://premium.wpmudev.org/blog/chrome-developer-tools/

    You'd be checking out the "Inspecting Elements" & the "Working With CSS" sections there (as those would be directly dealing with CSS customizations). They're real handy for exploring changes, and testing them out in real time. :slight_smile:

    Kind Regards,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.