Contact form drop-down customize

[bariqah1423]

Hello.

I have added a dropdown to my contact page called "Subject", as you can see here.

But the styling of it is completely different to every other box/field of the contact form.

I want to make it so that the dropdown part looks the same as the other boxes, and has the same styling effects etc.

Thanks.

[DaisyVo]

Hi @bariqah1423 

Thank you for reaching out to the Shopify community. I'd be glad to assist you. Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

[DaisyVo]

Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

[Vinsinfo]

@bariqah1423 Please follow the below steps to customize the drop-down field to match the style of your other fields in contact form. Let us know whether it is helpful for you.

1. Go to "Online stores" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Search "base.css" file and paste below CSS code at the bottom of the file like in the attached screenshot.

#request-type {
    background-color: transparent !important;
    color: #898981 !important;
    border: 1px solid #898981;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}
#request-type:hover {
    box-shadow: 0px 0px 0px 1px;
}
#request-type:focus-visible {
    outline: none;
    outline-offset: unset;
    box-shadow: none;
}
/* Make Send button text visible */
.contact__button .button {
    color: #FFFFFF !important;
}

FYI: We’ve updated the Send button text color to white(#FFFFFF) to improve visibility. If you'd like to change the text color, simply replace #FFFFFF with your desired color code. If you need any further assistance, feel free to reach out! We're happy to help.

4. Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.