Changing Swatch Selection Background Color

[technase]

Hi, 
I need help with the active swatches/ variant options. Currently, when a swatch is clicked/ selected, its border color darkens. However, I aim for the selected swatch/option to change its color. For example, upon selecting the 500 grams option, the color of the chosen box should shift to black with white text.

Link: https://testingstoresandthemes.myshopify.com/ 
Storefront Password: test
Theme: Turbo 

Thanks 

[LuffyOnePiece · Accepted solution]

Hi @technase ,

Try adding below css to styles.css.

.swatch_options input:checked+.swatch-element {
    background: #000;
    color: #fff;
}

Please don't hesitate to reach out if you require further help to optimize or customize your store. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

[Raj-WebDesigne · Accepted solution]

Add This Css In your edit Code > Style.css File

.swatch_options input:checked+.swatch-element {
    background: #000;
    color: #fff;
}

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
  .swatch_options input:checked+.swatch-element {
     background-color: #000;
     color: #fff;
  }
</style>

After modification:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[LuffyOnePiece · Accepted solution]

Hi @technase ,

Try adding below css to styles.css.

.swatch_options input:checked+.swatch-element {
    background: #000;
    color: #fff;
}

Please don't hesitate to reach out if you require further help to optimize or customize your store. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

[Raj-WebDesigne · Accepted solution]

Add This Css In your edit Code > Style.css File

.swatch_options input:checked+.swatch-element {
    background: #000;
    color: #fff;
}

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
  .swatch_options input:checked+.swatch-element {
     background-color: #000;
     color: #fff;
  }
</style>

After modification:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[Anshul_arora · Accepted solution]

Hello @technase ,

I understand you are looking to provide a black background color and white text color on selected options.

Please add the below-mentioned code at the bottom of the theme.liquid file before </body> tag and save.

<style>

.swatch_options input:checked+.swatch-element {
background: black;
color: white;
}

</style>

Output ->

I hope the code helps you.

Please share if you have any queries.

Thank you.