检查时如何更改输入的背景颜色？ [复制]答案

【问题标题】：how to change the background color of the input when checked? [duplicate]检查时如何更改输入的背景颜色？ [复制]
【发布时间】：2019-06-02 00:55:42
【问题描述】：

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>

这里我有一组单选和复选框输入，我正在尝试更改checked 输入的背景颜色。我可以更改元素的高度和宽度，但不能更改输入的 background-color。

哪里做错了？

【问题讨论】：

Refer

标签： css

【解决方案1】：

这是怎么做的：

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>

【讨论】：

这只会改变标签颜色