Add to Cart - Formatting - Remove native HTML drop down arrow

Design help Layout & Design
1

Hello Forum,

Does anybody have or know a script that will remove the native HTML dropdown arrow from the size field in the native webflow add to cart element? I don’t think it looks all that swanky. I’ve included a screen shot below for reference.

Thanks!

Screenshot 2022-09-16 200103
Screenshot 2022-09-16 200103868×739 9.71 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Hi @JTT here is solution

hope this will solve your request

3

Edit - Removed see below.

4

Hi Stan,

Apologies for the multiple replies - just figuring out how the messaging and replying in the forum work and thank you for the reply! Likewise, I’ve read through the article you’ve linked to and this it is an excellent discussion on how to do exactly what I’m trying to do but I’m having no luck when I drop the code into the ‘Before tag’. I know that I’m not entering the code properly but perhaps you can assist - It would be greatly appreciated! I’ve named the class ‘dropdown menu’ and have attached a screen shot of what I’m seeing in webflow.

Lastly, below is exaclty how I’ve dropped the code into the ‘Before tag’:

*,
*::before,
*::after {
box-sizing: border-box;
}

.dropdown menu {
// A reset of styles, including removing the default dropdown arrow
appearance: none;
// Additional resets for further consistency
background-color: transparent;
border: none;
padding: 0 1em 0 0;
margin: 0;
width: 100%;
font-family: inherit;
font-size: inherit;
cursor: inherit;
line-height: inherit;
}
dropdown menu::-ms-expand {
display: none;
}

Screen Grab
Screen Grab967×987 49.8 KB

5

Hi @JTT what I see is you are missing <style></style> tags to wrap your CSS, for now it is just plain text sitting in <head>

6

Thank you Stan!.. That did the trick! Should someone stumble into this discussion, below is exactly how I entered the code: Note, you’ll need to place the < and > into the code below before and after the styles…

style>
*,
*::before,
*::after {
box-sizing: border-box;
}

.dropdown-menu {
appearance: none;
background-color: transparent;
border: none;
padding: 0 1em 0 0;
margin: 0;
width: 100%;
font-family: inherit;
font-size: inherit;
cursor: inherit;
line-height: inherit;
}
.dropdown-menu::-ms-expand {
display: none;
}
</style

7

Also, strangely on Safari, I can’t get the text to center properly and whenever you click into the dropdown menu the toggle arrow appears… But it works on Chrome so I guess this is a partial victory…

8

Glad to see you have fond solution on your own. :+1:

9

Hey @JTT, you can simple add a style:

<style>
	.w-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}
</style>