Removing native dropdown arrow from input field in webf...

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.

AAmin Suleiman

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

4 comments

MMatt Johnson

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

AAmin Suleiman

Greatly appreciated. Matt

Worked great!!

AAurelien Schibli

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

MMatt Johnson

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

Add a reply

Community forum for knowledge and support

Removing native dropdown arrow from input field in webflow