How to highlight the color once selected?

Question

I have given focus and active property to input but it doesn't work. After the selection of any color, it doesn't highlight. Hover property is working though.

Below is the code I used to show highlight property for color.

.highlightC:focus,
.highlightC:focus-visible,
.highlightC:visited {
  border: 2px solid orange!important;
}

.highlightC:hover,
.highlightC:active {
  border: 2px solid white;
}

.highlightC {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid transparent;
}

.color1 {
  background-color: red;
}

.color2 {
  background-color: green;
}

.color3 {
  background-color: blue;
}

<div class="text-left mt-2">
  <p class="tpColorsHeading ">Available colors</p>
  <input type="radio" id="1" name="color" value="1" class="">
  <label for="1" class="dot color1 highlightC"></label>
  <input type="radio" id="2" name="color" value="2" class="">
  <label for="2" class="dot color2 highlightC"></label>
  <input type="radio" id="3" name="color" value="3" class="">
  <label for="3" class="dot color3 highlightC"></label>
</div>

I think you might need to share some more code because I can't replicate your problem with the code provided: https://jsfiddle.net/p7jyfwob/1/ My hunch is you have other things in CSS styling those radio buttons and would need to see that code to change it. — John, Jan 05 '21 at 07:54

Warden330 · Answer 1 · 2021-01-05T08:22:17.567

Your issue is that you check the label for :active status. That status only works for Elements like Links.

I commented the Code where i made changes

also see the following links to help you understand why you have to access it this way and why your attempt didnt get any results:

/*active is only working for links, not label elements*/
.highlightC:hover {
  border: 2px solid white;
}
/*you can style the border by checking the status of the input, + as an oeprator affects the next following label after clicking any radio button in this case, so it only works if the label comes after the radio-button in your dom*/
.text-left input[type="radio"]:checked+label {
   border: 2px solid white;
}

/*what are you trying to achieve with this? Visited also only works for links*/
.highlightC:focus,
.highlightC:focus-visible,
.highlightC:visited {
  border: 2px solid orange!important;
}
.highlightC {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid transparent;
}

.color1 {
  background-color: red;
}

.color2 {
  background-color: green;
}

.color3 {
  background-color: blue;
}

<div class="text-left mt-2">
  <p class="tpColorsHeading ">Available colors</p>
  <input type="radio" id="1" name="color" value="1" class="">
  <label for="1" class="dot color1 highlightC"></label>
  <input type="radio" id="2" name="color" value="2" class="">
  <label for="2" class="dot color2 highlightC"></label>
  <input type="radio" id="3" name="color" value="3" class="">
  <label for="3" class="dot color3 highlightC"></label>
</div>

score 0 · Answer 2 · edited Feb 22 '21 at 09:44

I think you need to make CSS for checked radio button.

This is the solution for the issue you are facing now:

input[type="radio"] {
  display: none;
}

.highlightC {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin: 3px;
  box-shadow: 0px 0px 0px 2px transparent;
}

input[type="radio"]:checked+.highlightC {
  box-shadow: 0px 0px 0px 2px darkorange;
}

.color1 {
  background-color: red;
}

.color2 {
  background-color: green;
}

.color3 {
  background-color: blue;
}

<div class="text-left mt-2">
  <p class="tpColorsHeading ">Available colors</p>
  <input type="radio" id="1" name="color" value="1" class="">
  <label for="1" class="dot color1 highlightC"></label>
  <input type="radio" id="2" name="color" value="2" class="">
  <label for="2" class="dot color2 highlightC"></label>
  <input type="radio" id="3" name="color" value="3" class="">
  <label for="3" class="dot color3 highlightC"></label>
</div>

dose this solution is works for you or not? – KuldipKoradia Jan 06 '21 at 12:03 — KuldipKoradia, Jan 06 '21 at 12:03

score 0 · Answer 3 · answered Jan 05 '21 at 08:35

You could use the :checked pseudo class selector in combination with the + adjacent sibling combinator:

.color-input {
  display: none;
}

.color-input:checked + .color-label {
  border-color: orange;
}

.color-label {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid transparent;
}

.color-label--red {
  background-color: red;
}

.color-label--green {
  background-color: green;
}

.color-label--blue {
  background-color: blue;
}

<fieldset>
  <legend>Available colors</legend>

  <input type="radio" id="1" name="color" value="1" class="color-input">
  <label for="1" class="color-label color-label--red"></label>
  
  <input type="radio" id="2" name="color" value="2" class="color-input">
  <label for="2" class="color-label color-label--green"></label>
  
  <input type="radio" id="3" name="color" value="3" class="color-input">
  <label for="3" class="color-label color-label--blue"></label>
</fieldset>

score -1 · Answer 4 · answered Jan 05 '21 at 07:54

-1

Yuo have to insert the css class name (highlightC) in the property class="" like this: class="highlightC"

answered Jan 05 '21 at 07:54

dova dominique kabengela

19
2

How to highlight the color once selected?

4 Answers4