how to change the background color of the input when checked?

Question

input:checked {
  height: 20px;
  width: 20px;
  background-color: red;
}
input:not(:checked) + label {
  opacity: 0.7;
}

<html>
<body>

<form action="">
  <input type="radio" checked="checked" value="male" name="gender"> <label>Male</label><br>
  <input type="radio" value="female" name="gender"> <label>Female</label><br>
  <input type="checkbox" checked="checked" value="Bike"> <label>I have a bike</label><br>
  <input type="checkbox" value="Car"> <label>I have a car </label>
</form>

Here i have set of radio and checkbox inputs and i am trying to change the background color of the checked input. I'm able to alter the height and width of the element but not the background-color of the inputs.

Where am doing wrong?

[Refer](https://stackoverflow.com/questions/34388696/how-to-change-the-background-color-on-a-input-checkbox-with-css) — Gibbs, Jan 07 '19 at 11:00

score 0 · Answer 1 · edited May 03 '19 at 13:45

Here is how to do it:

input:checked {
  height: 15px;
  width: 15px;
  border-radius:50%;
  background-color: red;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input:checked + label {
  background-color: red;
}

input:not(:checked) + label {
  opacity: 0.7;
}

<html>
<body>

<form action="">
  <input type="radio" checked="checked" value="male" name="gender"> <label>Male</label><br>
  <input type="radio" value="female" name="gender"> <label>Female</label><br>
  <input type="checkbox" checked="checked" value="Bike"> <label>I have a bike</label><br>
  <input type="checkbox" value="Car"> <label>I have a car </label>
</form>

this will change the label color only – Abdul Baig Jan 07 '19 at 11:06 — Abdul Baig, Jan 07 '19 at 11:06

how to change the background color of the input when checked?

1 Answers1