Change colour of selected buttons

Hi,

I can't change the colour of selected buttons so once it's clicked, the text has the same colour as the button and you can't see the text.

Can I ask the way to change this please?

Thank you!

Can you send me the link to the URL where you are facing the issue

Thanks.

1 hour ago, Shadmon said:

Can you send me the link to the URL where you are facing the issue

Thanks.

https://chihuahua-teal-dxkr.squarespace.com/config/

Is this it?

Can you make the website password-protected and give me the password so that I can check? Here is the guideline : https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

5 minutes ago, Shadmon said:

Can you make the website password-protected and give me the password so that I can check? Here is the guideline : https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

It's YLE2024!

https://chihuahua-teal-dxkr.squarespace.com/config/?frameUrl=%2F

1 hour ago, Shadmon said:

Please add this CSS to your website: You can add this code to Website > Website Tools > Custom CSS

.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked + label {
    color: #fff !important;
}

Let me know if it works!

It worked! Thank you so much!

If you don't mind me asking something else too, on the same page as you can see in the previous screenshot, the quantity box is square but I'd like to match the rounded shape to match the colours and sizes, is that possible?

Thank you.

Sure, Please add this CSS too:

.ProductItem-details .product-quantity-input input {
    border-radius: 50px;
    border-color: #41413f;
    padding: 15px 30px;
}

You can approve the answer as the solution if it helps you. Good day!

1 hour ago, Shadmon said:

Sure, Please add this CSS too:

.ProductItem-details .product-quantity-input input {
    border-radius: 50px;
    border-color: #41413f;
    padding: 15px 30px;
}

You can approve the answer as the solution if it helps you. Good day!

Thank you so much!

I'm so sorry for a lot of questions but is there a way to make sure that the number in the quantity is in the middle and not on the left side?

Here is the updated code. Please use this one instead :

.ProductItem-details .product-quantity-input input {
    border-radius: 50px;
    border-color: #41413f;
    padding: 15px 30px;
    text-align: ;
    text-align: center;
}

let me know if it works!

9 hours ago, Shadmon said:

Here is the updated code. Please use this one instead :

.ProductItem-details .product-quantity-input input {
    border-radius: 50px;
    border-color: #41413f;
    padding: 15px 30px;
    text-align: ;
    text-align: center;
}

let me know if it works!

Great, thank you so much for all your help!