What is the best way to emphasize the selected color?

Question

What is the best way to emphasize the selected color?

I am having trouble with setting the focus and active properties for an input element. Even after selecting a color, the highlight does not appear. However, the hover property is working fine.

Here is the code I have used to implement the highlight property for colors:

.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>

https://i.sstatic.net/7KUSX.jpg

html css bootstrap-4

Answer 1

Answer №1

It seems like the issue lies in checking the label for :active status, which only works for elements like links.

I have made some changes in the code and commented where those changes are.

For further explanation on why you need to access it this way and why your previous attempt didn't yield any results, please refer to these helpful resources:

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

It seems like the issue lies in checking the label for :active status, which only works for elements like links.

I have made some changes in the code and commented where those changes are.

For further explanation on why you need to access it this way and why your previous attempt didn't yield any results, please refer to these helpful resources:

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 3

Answer №2

To achieve this effect, consider utilizing the :checked pseudo class selector along 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 4

To achieve this effect, consider utilizing the :checked pseudo class selector along 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 5

Answer №3

If you're looking to style a checked radio button using CSS, here's how you can do it:

Check out the solution below:

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

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

input[type="radio"]:checked+.highlightC {
  box-shadow: 0 0 0 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 6

If you're looking to style a checked radio button using CSS, here's how you can do it:

Check out the solution below:

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

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

input[type="radio"]:checked+.highlightC {
  box-shadow: 0 0 0 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 7

Answer №4

To apply the highlight effect, make sure to include the css class name "highlightC" within the class attribute like so: class="highlightC"

Answer 8

To apply the highlight effect, make sure to include the css class name "highlightC" within the class attribute like so: class="highlightC"

What is the best way to emphasize the selected color?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

creating a div element with a height that matches its content dimensions

What are some ways to accomplish this task without relying on a photo editing tool?

Error message displayed on PHP web page

Exploring the Differences Between Nth-CSS and Jquery

Dynamic navigation menu shifting when bolded

List of elements inside an HTML box

Using JQuery to conceal floated divs

I am facing an issue with my login button as it does not seem to be performing the necessary function. Instead of advancing to the next

Problems encountered when applying box-shadow for text background across multiple lines

When hovering or mousing over, the text remains stationary and does not follow the scroll bar movement within the

How to store selected checkbox values in an array using AngularJS

Browser displaying a CSS error: "Invalid property name" while applying pseudo-element :after

What is the best way to gather the "name" and "value" attributes from a designated section of a form using JavaScript and store them in an array?

Why are there no borders around the rows and columns of my table?

Getting Started with Angular JS: A Beginner's Essentials

Tips for displaying a variable that contains HTML in PHP

Tips for shortening button text within a flex child element

Creating a gap between two elements without using the space-between property

Achieving consistent vertical alignment of text in different web browsers

The CSS code conceals the icon within the background