Community forum for knowledge and support

Updated 4 months ago

Removing native dropdown arrow from input field in webflow

At a glance

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