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>

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

哪里做错了？

Answer 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>

选中后如何更改输入的背景色？

1 个答案: