Change text color on the variant pills on product pages for theme Dawn

[Jean-Philippe42]

I try to change the text color of the variant pills for the theme Dawn .
It is bare visible.

I achieved to do it for other elements but I am not able to find where I can change this... I need to change the enable and disable state.

The link to the page ist here:
https://shop.diastierwelt.de/products/jugendelexier

Is somebody know that?

Thanks!

[ZestardTech]

Hi @Jean-Philippe42 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.product-form__input input[type=radio].disabled:checked+label, .product-form__input input[type=radio]:disabled:checked+label {
background: #000;
color: #fff;
}
.product-form__input input[type=radio]:disabled+label, .product-form__input input[type=radio].disabled+label {
background: #000;
color: #fff;
}
.product-form__input input[type=radio]:checked+label {
    background: #000;
    color: #fff;
}
.product-form__input input[type=radio]+label {
    background: #000;
    color: #fff;
}

[Made4uo-Ribe]

Hi @Jean-Philippe42 

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.

.product-form__input input[type=radio].disabled:checked+label, .product-form__input input[type=radio]:disabled:checked+label {
    color: black;
}
.product-form__input input[type=radio]:disabled+label, .product-form__input input[type=radio].disabled+label {
    color: white;
}

• And Save. 
• Result:
• 

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

[Rahul_dhiman]

Hello @Jean-Philippe42 
Go to online store ---------> themes --------------> actions ------> edit code------->assets ---> section-main-product.css
ad this code at the end of the file.

.product-form__input input[type=radio].disabled:checked+label, .product-form__input input[type=radio]:disabled:checked+label {
color: red !important;
}
.product-form__input input[type=radio]:disabled+label, .product-form__input input[type=radio].disabled+label {
color: red !important;
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[niraj_patel · Accepted solution]

Hello @Jean-Philippe42 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .product-form__input input[type=radio].disabled:checked+label{
       color: #5767dd !important;
   }
   .product-form__input input[type=radio].disabled+label {
        color: #5767dd !important;
   }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Jean-Philippe42]

Thanks! It work well now!

[BSS-TekLabs]

- Here is the solution for you @Jean-Philippe42 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.product-form__input input[type=radio].disabled+label {
    color: white !important;
}
.product-form__input input[type=radio].disabled:checked+label {
 color: black !important;
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.