Community forum for knowledge and support

Updated 5 months ago

Removing native dropdown arrow from input field in webflow

At a glance

A community member is having an issue with a native icon appearing on an input field in a Webflow project. They are trying to keep just the custom chevron-down.svg icon and remove the native dropdown arrow. Another community member suggests adding the following CSS to the global styles component in Webflow to resolve the issue:

select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; }

The original poster confirms that the suggested solution worked great. Another community member suggests adding the CSS to the style guide for future projects, and the original poster confirms it has already been implemented in the latest style guide release.

Hey team!

I’m having an issue with a native icon appearing on the input field in “Contact - 6” for a Webflow project. I’m trying to keep just the chevron-down.svg icon, but the native dropdown arrow keeps showing up alongside it. It’s driving me a bit crazy, so I was wondering if anyone has suggestions or can point me in the right direction on how to remove the native icon while keeping the custom chevron-down.svg?

Appreciate any help!

Attachments
Screenshot 2024-09-04 at 6.58.28 PM.png
Screenshot 2024-09-04 at 7.02.59 PM.png
M
A
A
4 comments

sure you just need to add this bit of CSS to your global styles component in Webflow.

select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

Attachment
image.png

Greatly appreciated. Matt

Worked great!!

I just had the same issue. Don't you want to add it to the styleguide clonable for future projects?

Yep, already implemented into the latest style guide that was released yesterday.

Add a reply
Sign up and join the conversation on Slack