css 选中复选框时更改标签背景色

np8igboo 于 2023-04-13 发布在其他

关注(0)|答案(2)|浏览(215)

我想实现一个静态复选框（没有query/script/function），如下所示：
通过单击复选框，它将变为棕色（如name框），再次单击将变为正常（如price）

.checkbox-round {
  width: 45px;
  height: 30px;
  /*background-color: white !important;*/
  border-radius: 5px !important;
  /*background-color: white;*/
  vertical-align: middle;
  /*border: 3px solid #ddd;*/
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}

.checkbox-round:checked {
  background-color: #A97B47 !important;
}

<label>
  <input id="filterByName" type="checkbox" checked class="col-md-4 col-sm-6 col-12 button checkbox-round" name="filterByName"  value="name" placeholder="name">
  name
</label>

css

来源：https://stackoverflow.com/questions/75992689/change-the-label-background-color-when-a-checkbox-is-checked

2条答案

按热度按时间

2lpgd9681#

1.将输入移到标签外
1.将for属性添加到标签以将其连接到复选框
1.用display: none隐藏复选框
1.设置标签样式而不是复选框样式
1.使用+组合符应用background-color和color更改

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + label {
  background-color: #A97B47;
  color: white;
}

label {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: 5px;
}

<input id="filterByName" type="checkbox" name="filterByName"  value="name" placeholder="name" checked>
<label for="filterByName">name</label>

PS：正如@CBroe在评论中所说的那样。它应该是单选按钮，因为你只能按1个选择而不是多个选择排序。技术保持不变。

赞(0）回复(0）举报 2023-04-13

ao218c7q2#

在你的css上使用：has（）测试

.checkbox-round {
  padding:10px 15px;
  /*background-color: white !important;*/
  border-radius: 5px !important;
  /*background-color: white;*/
  vertical-align: middle;
  /*border: 3px solid #ddd;*/
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}

input{
  appearance: none;
  display:none;
}

.checkbox-round:has(> input:checked){
  background-color: #A97B47 !important;
  color:white;
 }

<label class="checkbox-round">
  <input type="checkbox" checked name="checkbox"/>
  Name
</label>

赞(0）回复(0）举报 2023-04-13

我来回答

css 选中复选框时更改标签背景色

2条答案

相关问题

热门标签

最新问答