Fixing Duplicate Caret Icons in Product Header 5 Dropdown Menu

·

Hey folks! I’ve been working on a site lately, and I’m running into a hopefully small but annoying styling issue. I’m working with the Product Header 5 component (e-commerce), and I need to keep the dropdown menu. For some reason, the dropdown menu has 2 down arrows/caret icons. How do I get rid of the smaller icon on the right? I have no idea when and where it came from.

5 comments

indies p.
·
Ah yes, you probably have custom <select> styling in addition to the browser native styling
❤️1

indies p.

·

that's how to remove the browser native style

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

Peter P.
·
Great! Thank you for the quick response!
indies p.
·
you're welcome, does it fix it?
Matt J.
·
Peter P. the double arrows should not be showing up on publish - if they do thats an error I would like to know - but if they don't thats the intention. However, I was exploring this issue recently and I see no reason why we couldn't implement this custom code into the global styles embed so that in the webflow designer, its also not showing up - I'll test again to confirm and then recommend to the team that we make this change. But yeah, again this should not show up like that on publish and the reason that it shows up at all is because we're using custom code to alter this and some custom code does not execute in webflow designer.