How to change variant drop-down style

My site- motocrane.com is generally comprised of dark banners with white Body Text.
However, the product variant drop-downs have a white background, so the white body text is not readable.

How do I change my product variant text to black without affecting the rest of the site style?

I don't see product page. Can you share link to variant dropdowns?

Following Same.

On 1/3/2020 at 10:43 AM, tuanphan said:

I don't see product page. Can you share link to variant dropdowns?

https://www.motocrane.com/heavylift

7 hours ago, moaiz95 said:

By using the following code you can change varient

/* -- code to change variant drop-down color, dark grey version -- */
.template-product .single-option-selector, .single-option-selector-product {
  background-color:#999999; 
  color:#ffffff;
}
/* - end - */

I am moiz from vidmate app download where you can download youtube videos on your android phone.

Can you explain how to do this on the page: https://www.motocrane.com/heavylift

11 hours ago, zacharynelson said:

Can you explain how to do this on the page: https://www.motocrane.com/heavylift

It is spam comment. Squarepace has no .template-product...code.

Add to Home > Design > Custom CSS

body#collection-5e0d56dfa5b0832cb7a43916 .variant-select-wrapper * {
    color: black;
}

Hello,

I am now having the opposite problem on a new page (https://www.motocrane.com/compactcontroller) I've created with a white background.

The Product Block sits on a white background, but the text is illegible because of the Style.

How can I fix the problem on this page so that the text is black, and the "Add to Cart" button has a black background with white text?

On 1/30/2020 at 9:34 AM, zacharynelson said:

Hello,

I am now having the opposite problem on a new page (https://www.motocrane.com/compactcontroller) I've created with a white background.

The Product Block sits on a white background, but the text is illegible because of the Style.

How can I fix the problem on this page so that the text is black, and the "Add to Cart" button has a black background with white text?

 

Answered your email

Hi! If anyone can help we are trying to edit the variant drop-down button. We want to make the "Select Item Box" Smaller and have the "Quantities Box" bigger (these would be the 1 Bag, 3 Bags and 10 Bags in the dropdown". Here is our website: enjoysnacks.com. Here is also a specific product page with the variants: https://www.enjoysnacks.com/shop/candies/sour-lychee. Any help would be greatly appreciated!

On 6/12/2020 at 4:52 AM, galangster said:

Hi! If anyone can help we are trying to edit the variant drop-down button. We want to make the "Select Item Box" Smaller and have the "Quantities Box" bigger (these would be the 1 Bag, 3 Bags and 10 Bags in the dropdown". Here is our website: enjoysnacks.com. Here is also a specific product page with the variants: https://www.enjoysnacks.com/shop/candies/sour-lychee. Any help would be greatly appreciated!

Add to Home > Design > Custom CSS

.variant-select-wrapper {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.variant-select-wrapper option {
    font-size: 30px;
}

On 6/13/2020 at 11:49 PM, tuanphan said:

Add to Home > Design > Custom CSS

.variant-select-wrapper {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.variant-select-wrapper option {
    font-size: 30px;
}

@tuanphan Thank you for this, it worked perfectly! One last question, is there a way to add padding to the option drop down (which would be the 1 Bag, 3 Bags and 10 Bags option). They are a little close together when we increase the font size.

On 6/16/2020 at 2:58 AM, galangster said:

@tuanphan Thank you for this, it worked perfectly! One last question, is there a way to add padding to the option drop down (which would be the 1 Bag, 3 Bags and 10 Bags option). They are a little close together when we increase the font size.

Hi. Sorry for the late reply. Have you solved yet?

On 6/21/2020 at 3:08 AM, tuanphan said:

Hi. Sorry for the late reply. Have you solved yet?

@tuanphan We haven't but as of now its not too big of a deal. Thanks!

2 hours ago, TOCCO said:

Can you please help me? 

I want to change the color of these variant boxes. I also want the text to be above the boxes instead of inside.
Thank you

Can you share link to product in screenshot?

Hey everyone! I would also be interested to know how to change the width of the boxes for an example like this? for example on my website here: https://www.andthenjewelry.com/collections/beni-shoga-n8amh

I am trying to make the "Select Size' and "Quantity" fields the same width as the content above it. 

thanks so much for the help

hello everyone. 

if @tuanphan will see my question by chance, would be happy to find some answers and help, cause googling didn't help. 

Is there any way to change the colour of drop down variants in "Form" on mobile version from blue to black? 

Using style editor I installed all colours needed but by default in mobile version some things turn to blue colour. I attach a screenshot. 

Again, will be happy and appreciate any comments. 

3 hours ago, madlymade said:

hello everyone. 

if @tuanphan will see my question by chance, would be happy to find some answers and help, cause googling didn't help. 

Is there any way to change the colour of drop down variants in "Form" on mobile version from blue to black? 

Using style editor I installed all colours needed but by default in mobile version some things turn to blue colour. I attach a screenshot. 

Again, will be happy and appreciate any comments. 

I'm not sure this is possible.

If you share link to page where you use form, I can take a look

On 9/3/2022 at 2:09 AM, tuanphan said:

I'm not sure this is possible.

If you share link to page where you use form, I can take a look

Thank you for reply anyways. 

just in case, the link : https://www.bloommary.com/psy you need to press the button on that page to open this form. I guess it could be the problem of safari/iOS only, cause on Samsung/chrome it's all black. 

On 9/3/2022 at 3:17 AM, madlymade said:

hello everyone. 

if @tuanphan will see my question by chance, would be happy to find some answers and help, cause googling didn't help. 

Is there any way to change the colour of drop down variants in "Form" on mobile version from blue to black? 

Using style editor I installed all colours needed but by default in mobile version some things turn to blue colour. I attach a screenshot. 

Again, will be happy and appreciate any comments. 

Yes, maybe problem by browser/mobile device

Try adding this to Design > Custom CSS

.sqs-async-form-content .form-wrapper .field-list .field select {
    background-color: white !important;
    color: black !important;
}

Hello - the space between product title, cost, and the variant drop down boxes is wide and it forces the user to scroll on mobile. Is there a way I can bring this all closer together? 

https://www.alivacious.com/prints/p/single-palm-pring-l6t6p-zjat3 

On 11/25/2022 at 10:03 AM, Rudybro said:

Hello - the space between product title, cost, and the variant drop down boxes is wide and it forces the user to scroll on mobile. Is there a way I can bring this all closer together? 

 

https://www.alivacious.com/prints/p/single-palm-pring-l6t6p-zjat3 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
/* space under title */
h1.ProductItem-details-title {
    margin-bottom: 0px !important;
}
/* space under price */
.ProductItem-product-price {
    margin-bottom: 0px !important;
}
/* variant space */
.variant-option {
    margin-bottom: 5px !important;
}
}

Thank you so much! Is it possible to make the drop down boxes a bit smaller? Same with the quantity box? I'd rather they be less tall. 

Thank you again!!! 

On 11/27/2022 at 11:01 PM, Rudybro said:

Thank you so much! Is it possible to make the drop down boxes a bit smaller? Same with the quantity box? I'd rather they be less tall. 

Thank you again!!! 

You mean width or height?

Sorry for not specifying. Both please! 

21 hours ago, Rudybro said:

Sorry for not specifying. Both please! 

Add this to Design > Custom CSS

.variant-select-wrapper, .product-quantity-input input {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}