How to highlight the color once selected? - html

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>

Answer 1

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:
How to style radio-buttons
operators to affect other elements(the + operator in my example)
/*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>

Answer 2

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>

Answer 3

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>

Answer 4

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