CODEWITHSUNDEEP
htmlcss
Patt.M
Patt.M

Reputation: 59

Radio button does not change background color when on click HTML/CSS

I want to change background color of radio button by orange when I click on another radio button it changes color from white to orange as this

enter image description here

Code Snippet :

<!DOCTYPE html>
<html>
<head>
<style>
input [type="radio"]:checked,
input [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
input [type="radio"]:checked + label,
input [type="radio"]:not(:checked) + label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
input [type="radio"]:checked + label:before,
input [type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: white;
}
input [type="radio"]:checked + label:after,
input [type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: orange;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
 }
 input [type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
 }
 input [type="radio"]:checked + label:after {
     opacity: 1;
     -webkit-transform: scale(1);
     transform: scale(1);
 }
 </style>
 </head>
 <body>
    <div class="radio-1">
        <input type="radio" class="radio-buttons" id="male" name="gender" value="male">
        <label name="gender">Male</label>
    </div>
    <div class="radio-2">
        <input type="radio" class="radio-buttons" id="female" name="gender" value="female">
        <label name="gender">Female</label>
    </div>
</body>
</html>

The code does not working as expected.

please tell me how can I improve this code so that change the radio button background color.

Any help will be awesome! Thanks!

Upvotes: 1

Views: 2542

Answers (2)

Gagandeep Singh
Gagandeep Singh

Reputation: 1005

You need to remove the spaces after input in css selectors so that browser can select the right element in the dom, also you need to add for="" attribute to your labels for respective radio buttons so when you click on labels then it changes the respective radio button also, rest of you code is perfect !

<!DOCTYPE html>
<html>
<head>
<style>
input[type="radio"]:checked,
input[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
input[type="radio"]:checked + label,
input[type="radio"]:not(:checked) + label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
input[type="radio"]:checked + label:before,
input[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: white;
}
input[type="radio"]:checked + label:after,
input[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: orange;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
 }
 input[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
 }
 input[type="radio"]:checked + label:after {
     opacity: 1;
     -webkit-transform: scale(1);
     transform: scale(1);
 }
 </style>
 </head>
 <body>
    <div class="radio-1">
        <input type="radio" class="radio-buttons" id="male" name="gender" value="male">
        <label name="gender" for="male">Male</label>
    </div>
    <div class="radio-2">
        <input type="radio" class="radio-buttons" id="female" name="gender" value="female">
        <label name="gender" for="female">Female</label>
    </div>
</body>
</html>

Upvotes: 3

user13601182
user13601182

Reputation:

There are two small issues in the code you posted. Fixing those should make the buttons work as you intended:

  1. In the CSS, you have spaces between input and [type="radio"], where you want to make it input[type="radio"] instead (so without a space inbetween).
  2. In the HTML, there must be a for attribute on the label, which links to the id of the accompanying input. So for="male" on one label, and for="female" on the other. Otherwise a click on the label will not trigger a click on the hidden input.

I hope that helps!

Upvotes: 1

Related Questions