How can I style radio buttons with different colors?

user_3960185 0
Viewed 26234

Using bootstrap 4, I have a simple yes/no custom radio buttons set.

<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" id="rd_1" name="rd" class="custom-control-input green" value="Yes">
    <label class="custom-control-label" 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 red" value="No">
    <label class="custom-control-label" for="rd_2">No</label>
</div>

When the user select "Yes", I want that the color of the "Yes" button turn green, and when the user select "No" the color of the "No" button turn red.

enter image description here

I can define the color of both radios using the css below, but how can define different colors for each one?

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #7B1FA2;
    background-color: red;
}
bootstrap-4 css
1 Answers

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>

user_46032950
Related