0

I'm looking to display the $colors name depending on which color swatch button is clicked on. Here is my code to display the color swatch buttons, but I'm not sure on how I should change the $colors name depending on what is clicked on. A lot of big brand retailers have examples of this on their websites. Here is an example on Urban Outfitters of what I'd like to happen when changing the color. When switching between the colors, the name changes from "Gold" to "Taupe" in this example.

$colors: ( 
 'color-Navy'                  #2D2F3C,
 'color-Ash'                   #EEF0F2,
 'color-Black'                 #060606,
 'color-White'                 #F6F6F6,
 'color-Charcoal'              #59545A,
);

@each $color in $colors {
 $colorName: nth($color, 1);
 $bgColor:   nth($color, 2);

#ProductSelect-option-#{$colorName} + label {
  background-color: $bgColor;
  color: $bgColor;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 25px;
  margin: 5px;
  text-indent: 100%;
  white-space: nowrap;
 }

#ProductSelect-option-#{$colorName}:checked + label {
 border-color: #555;
 border-width: 3px;
 }
}
Abdullah Dibas
  • 1,499
  • 1
  • 9
  • 13
Levi
  • 53
  • 7

1 Answers1

2

Assuming your CSS selectors are correct, you simply want to set a color for

#ProductSelect-option-#{$colorName}:checked + label

For example:

#ProductSelect-option-#{$colorName}:checked + label {
  color: $colorName;
}

This will update the <label>'s color whenever the corresponding checkbox is checked. Due to the use of the :checked pseudo-class, this will also change the colour back when the checkbox is unchecked.

I also note that you have the variable name in the selector. While this is fine, this may not be intentional. The key here is :checked + label; as long as you are targeting your checkbox correctly, the above selector will target the next <label>.

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • Would this be better with radio buttons instead? I mean, not exactly sure of the behavior but considering that only one should be selected at a time – IvanS95 Feb 06 '19 at 20:23
  • 1
    It depends on the desired behaviour, but it would certainly be possible. In fact, it even uses the same `:checked + label` syntax! See [**this answer**](https://stackoverflow.com/a/1431788/2341603) for an example of that :) – Obsidian Age Feb 06 '19 at 20:26
  • Awesome, thanks, reading again OP's question however, I think the intention is to display the name itself, like if you select the first color it should say "Navy" on a span or something like that. I think what you do is just changing the color of the label's text to the one in the variable – IvanS95 Feb 06 '19 at 20:35