How to style the variation & quantity buttons on product block

The variant & quantity buttons on product blocks don't have a normal class to target with CSS - how can I style them - or am I being dumb? 

https://sarahfarooqi.squarespace.com/calendars-product-info

You can target it use

.variant-select-wrapper select {Your CSS}

or select[data-variant-option-name="Option"] {Your CSS}

with quantity, use .product-quantity-input input[type="number"]

Really appreciate that - although cannot figure out how to change the border radius and padding on the Option button - it works on the quantity button...

https://sarahfarooqi.squarespace.com/calendars

Would be much easier if the product block used up the same styling as on the product item page! 

58 minutes ago, emmageorge said:

Really appreciate that - although cannot figure out how to change the border radius and padding on the Option button - it works on the quantity button...

https://sarahfarooqi.squarespace.com/calendars

Would be much easier if the product block used up the same styling as on the product item page! 

#collection-5dc2d77721110f74288839b9 select[data-variant-option-name="Option"] {
    background-color: #d4ddde;
    font-size: 20px;
    border-radius: 10px;
    padding: 10px;
}

border radius & padding should work

I really want to give up as life's too short to faff about with this - but it doesn't work and I don't know why, I tried adding !important. Maybe let it drop - thanks for your time Tuan

1 hour ago, emmageorge said:

I really want to give up as life's too short to faff about with this - but it doesn't work and I don't know why, I tried adding !important. Maybe let it drop - thanks for your time Tuan

Try inserting the code & share url, i'll check.

what a man! https://sarahfarooqi.squarespace.com/calendars 

Here's what I've got - I tried !important after the radius & padding of Option. 

#collection-5dc2d77721110f74288839b9 {

  select[data-variant-option-name="Option"] {
    background-color: #d4ddde;
    font-size: 20px;
    border-radius: 10px;
    padding: 10px;}
    
    .product-quantity-input input[type="number"] {
      background-color: #D4DDDE; 
      font-size: 20px;
      border-radius: 20px;
      padding: 10px; }
}

5 minutes ago, emmageorge said:

what a man! https://sarahfarooqi.squarespace.com/calendars 

Here's what I've got - I tried !important after the radius & padding of Option. 

#collection-5dc2d77721110f74288839b9 {

  select[data-variant-option-name="Option"] {
    background-color: #d4ddde;
    font-size: 20px;
    border-radius: 10px;
    padding: 10px;}
    
    .product-quantity-input input[type="number"] {
      background-color: #D4DDDE; 
      font-size: 20px;
      border-radius: 20px;
      padding: 10px; }
}

 

It worked here https://prnt.sc/pwwpkw

Have you tried clearing cache yet?

yep - no difference. Weird non? 

hi! was this ever resolved? i'm having the same issue. i have two buttons that i need to modify the look of. the two buttons are called "length" and "reusable cooler bag."  i used the following code to transform the "length" button, which worked successfully:

#item-60219600caaff826bd81857b select[data-variant-option-name="length"] {
    background-color: #fffcf1;
    font-size: 20px;
    border-radius: 30px;
      border-color:#844427;
    padding: 10px;
}

however, when I copy and paste this code, replacing "length" with "reusable-cooler-bag," it doesn't work. 

my site url is https://maroon-burgundy-9dzz.squarespace.com/config/pages/60219600caaff826bd818567. click on any of the product buttons and you'll see what i'm talking about.

thank you so much!

@tuanphan 🙂

On 3/4/2021 at 3:23 AM, rooted said:

hi! was this ever resolved? i'm having the same issue. i have two buttons that i need to modify the look of. the two buttons are called "length" and "reusable cooler bag."  i used the following code to transform the "length" button, which worked successfully:

#item-60219600caaff826bd81857b select[data-variant-option-name="length"] {
    background-color: #fffcf1;
    font-size: 20px;
    border-radius: 30px;
      border-color:#844427;
    padding: 10px;
}

however, when I copy and paste this code, replacing "length" with "reusable-cooler-bag," it doesn't work. 

my site url is https://maroon-burgundy-9dzz.squarespace.com/config/pages/60219600caaff826bd818567. click on any of the product buttons and you'll see what i'm talking about.

thank you so much!

Hi. /config is admin url. See how to find page url.

On 3/7/2021 at 12:24 AM, tuanphan said:

Hi. /config is admin url. See how to find page url.

hey! sorry about that! the page url is:

https://maroon-burgundy-9dzz.squarespace.com/order-a-cleanse

On 3/10/2021 at 1:15 AM, rooted said:

hey! sorry about that! the page url is:

https://maroon-burgundy-9dzz.squarespace.com/order-a-cleanse

Hi. Your site is private. Did you solve this?