Changing design of form drop down selector

Site URL: https://www.gramrphone.com/

Hi there, my website at https://www.gramrphone.com/ has a form field at the bottom of the home page. We have a drop down selector as one of the options in the form. However the drop down selectors looks very small and different from the other fields.

Is there a way to change the drop down font and size/look of the drop down?

Thanks!

Add to Design > Custom CSS

.form-wrapper .field-list .field select {
    padding: 15px;
    border-radius: 100px;
    width: 100%;
}

Related to this, is there a way to change the hover color in the dropdown? In this example it's bright blue. On my site it's a purple color which is not anywhere in my color palette, and I can't figure out how to make that color change.

14 hours ago, girlfriday said:

Related to this, is there a way to change the hover color in the dropdown?

Not a simple way. In general browsers use the OS supplied menu to provide a consistent user experience.

In other words the webpage is supplying the text to construct the menu, the browser reads that text and passes it onto the OS to display the menu to you.

On 1/12/2021 at 11:12 PM, tuanphan said:

Add to Design > Custom CSS

.form-wrapper .field-list .field select {
    padding: 15px;
    border-radius: 100px;
    width: 100%;
}

 

This hasn't made any change for me. I'm on 7.1. Anyone know the answer? There's no option within the site styles.

On 8/10/2024 at 5:05 AM, CJGrossbard said:

This hasn't made any change for me. I'm on 7.1. Anyone know the answer? There's no option within the site styles.

If you share link to page where you use form, I will check it again