HTML 更改选中复选框的背景颜色

问题描述

我有一个非常简单的问题，但我找不到一个简单的答案.

I have a really simple question but I could'nt find one simple answers for this.

我有一个如下所示的复选框:

I have a checkbox like below:

<input type="checkbox">

并且我想在选中此复选框时仅更改背景颜色.

And I want to change just the background color when this checkbox is checked.

是否有一种简单的方法可以在 CSS 或 JS 中做到这一点?

Is there a simple way to do this in CSS or JS ?

推荐答案

你可以简单地使用 :checked 伪类和 :after 伪元素在选中时为背景着色.

You can simply use :checked pseudo class and :after pseudo element to color your background when its checked.

对于复选框的完整背景，您需要完全自定义复选框.它是一个完整的 CSS 解决方案.

For a complete background on a checkbox you we need full customised the checkbox. Its a complete CSS solution.

input[type="checkbox"]:checked {
  background: blue;
  color: white;
}

input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background: lightgray;
  height: 16px;
  width: 16px;
  border: 1px solid white;
  color: white;
}

input[type="checkbox"]:after {
  content: ' ';
  position: relative;
  left: 40%;
  top: 20%;
  width: 15%;
  height: 40%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(50deg);
  display: none;
}

input[type="checkbox"]:checked:after {
  display: block;
}

<input type="checkbox" />

这篇关于HTML 更改选中复选框的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！