How do I change the background of the variant select dropdown box?

[hvstlco]

website: hvstl.co

password: tongai

I was wondering how I would change the background of this variant picker, and remove the border around it as well. Any help is appreciated!

[Made4uo-Ribe · Accepted solution]

Add this code. 

.select:before, .select:after, .select:hover.select:after, 
.customer select:before, .customer select:after,.customer select:hover.select:after {
    box-shadow: none !important;
} 

And Save. 

result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Made4uo-Ribe]

Hi @hvstlco 

Check this one. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

.select__select, .customer select, .select .icon-caret, .customer select + svg {
    background: red;
    color: white;
}

• And Save. 
• Result:
• 

  I also change the color, if you dont want to include the text color just let me know. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[hvstlco]

How do I remove the border aswell?

[Made4uo-Ribe · Accepted solution]

Add this code. 

.select:before, .select:after, .select:hover.select:after, 
.customer select:before, .customer select:after,.customer select:hover.select:after {
    box-shadow: none !important;
} 

And Save. 

result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[hvstlco]

Thank you very much!

[PageFly-Richard · Accepted solution]

Hi @hvstlco 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.product .select__select, .product .customer select, .product .select .icon-caret, .product .product .customer select + svg{
    background: red;
    color: white;
}
.product .select::after {
box-shadow: none;
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly 

[hvstlco]

Thank you very much aswell!