How to Style Radio Buttons with Different Colors

How do I change the color of radio buttons?

A radio button is a native element specific to each OS/browser. There is no way to change its color/style, unless you want to implement custom images or use a custom Javascript library which includes images (e.g. this - cached link)

How to have different colors of radio buttons?

Right now in your CSS, you're only checking whether or not any radiobutton is checked, and painting it blue. You need to create an option so that you can differ between radiobuttons (to give them different colours for instance).

Classes are great for this, they're pretty much meant for this functionality.
Adapt your HTML so that it looks like this:

<div>
  <input type="radio" checked="checked" class="blue" id="radio01" name="radio" />
  <label for="radio01"><span></span>Radio Button 1</label>
</div>

<div>
 <input type="radio" id="radio02" class="green" name="radio" />
 <label for="radio02"><span></span>Radio Button 2</label>
</div>

Notice how the radiobuttons now differ in their class attributes (so now you can access them seperately.

Adapt your CSS like this:

input[type="radio"].green:checked + label span{
     background-color:green;
     border:1px solid blue;
}

input[type="radio"].blue:checked + label span{
     background-color:blue;
     border:1px solid blue;
}

Now your CSS will paint radiobuttons that have their class set to blue, blue, and the ones classed as green, green.

How can I style radio buttons with different colors?

That would be a nice experiment to play around with css. My concern is about the usability and the user expectations.

By changing the way a radio button is perceived, especially the status of the current state I believe we are undermining the effectiveness of the form itself.

As a user I would be concerned to see that the "no" option has a red highlight.
You know when the thing you type in a form is not valid?
Having the "no" option in red would seem like it is not a valid option to pick.

Making the "yes" option in green will make it seem like is the only valid option a user can choose. That is misleading to say the least.

I would strongly advice to NOT make the two radio buttons in any particular colour and maintain the native browser colours.

In any case, here is the code to make it work.

Note that I have changed the markup and added the two distinct css classes.

The markup now has the words red and green attached to the <label> rather than the <input> elements.

From the css I've moved the background declaration from the generic one to the two specific colours.
Let me know if you have any additional issues with the specificity. It can be fixed. 

.custom-control-input:checked~.custom-control-label::before {  color: #fff;  border-color: #7B1FA2;}
.custom-control-input:checked~.custom-control-label.red::before {  background-color: red;}
.custom-control-input:checked~.custom-control-label.green::before {  background-color: green;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /><div class="custom-control custom-radio custom-control-inline">  <input type="radio" id="rd_1" name="rd" class="custom-control-input" value="Yes">  <label class="custom-control-label green" for="rd_1">Yes</label></div><div class="custom-control custom-radio custom-control-inline">  <input type="radio" id="rd_2" name="rd" class="custom-control-input" value="No">  <label class="custom-control-label red" for="rd_2">No</label></div>

Is it possible to change the color of selected radio button's center circle

You can mimic the radio button using some round border trick (to render the outer circle) and the pseudo-element :before (to render the inner circle) which can fortunately be used on an input field of radio type:

input[type='radio'] {
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border:1px solid darkgray;
  border-radius:50%;
  outline:none;
  box-shadow:0 0 5px 0px gray inset;
}

input[type='radio']:hover {
  box-shadow:0 0 5px 0px orange inset;
}

input[type='radio']:before {
  content:'';
  display:block;
  width:60%;
  height:60%;
  margin: 20% auto;    
  border-radius:50%;    
}
input[type='radio']:checked:before {
  background:green;
}

Working Demo.

How change the color of the radio button

There are two ways to style radio buttons (and checkboxes by the way) only with CSS:


Leave a reply



Submit