如何在简单的 HTML 中更改复选框背景颜色

Question

我无法更改复选框背景颜色。我的任何尝试均不成功，请参阅 - https://jsfiddle.net/o4rnd1q7/1/

    input[type="checkbox"] {
        background-color: #002B4E !important;
        color: white;
    }

    input[type="checkbox"]:enabled:checked {
        background-color: #002B4E !important;
        color: white;
    }

   input[type="checkbox"]:before {
        background-color: #002B4E !important;
        color: white;
    }

    input[type="checkbox"]::before {
        background-color: #002B4E !important;
        color: white;
    }

    .dark-checkbox input[type="checkbox"]:checked {
        background-color: #002B4E !important;
        color: white;
    }

复选框仍然具有浅蓝色，而不是需要的深蓝色。

Answer 1

据我所知，您还可以在 CSS 中只对背景颜色做一些简单的事情。我希望有一种更简单的方法来进行复选标记，您认为这会被视为它的字体颜色，但事实并非如此

input[type="checkbox"] {
accent-color: desired-color
}

Answer 2

您无法设置浏览器默认复选框的样式，因此我们必须隐藏它并创建一个自定义复选框，如下所示：

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 2px black solid;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #002B4E;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 6px;
  top: 3px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  transform: rotate(35deg);
}

<label class="container">
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

Answer 3

无法设置复选框本身的样式，但可以在其上放置 CSS 过滤器，而不必将其隐藏以代替其他 HTML。

input[type="checkbox"] {
    filter: sepia(100%) brightness(80%) hue-rotate(170deg) saturate(70%) contrast(300%);
}

但是，请记住，不同的浏览器以不同的方式处理复选框和过滤器。我已经在 Edge、Chrome 和 Firefox 中对此进行了测试，它看起来与您所讨论的颜色完全不同。

不同浏览器对 HTML 输入按钮的 CSS 过滤的解释之间的差异

Answer 4

除了爸爸卡多纳的有用答案之外，他精彩地建议使用accent-color，请注意，这accent-color只会设置复选框的复选框背景的样式:checked。

您无法设置未选中复选框的背景样式 - 但您可以给它们设置不透明度，如果它们位于深色背景上，这会有效地为它们提供暗淡的背景。

const arr = ['darkslategrey|#4f704f','maroon|pink','#222|#49596e'];
let cnt = 0;
document.getElementById('btn').addEventListener('click', () => {
  scheme = arr[cnt].split('|')
  document.querySelector('body').style.background = scheme[0];
  document.querySelector('#two').style.accentColor = scheme[1];
  cnt++;
  cnt = cnt > 2 ? 0 : cnt++;
});

body{font-size:1.5rem;color:white;background:#222;}
input[type=checkbox]{transform:scale(2); margin:0px 30px 10px;}
hr{position:relative;bottom:4px; border-bottom:1px solid #cccccc11;}
.accent{accent-color: #49596e; }
.accent:not(:checked){opacity:0.5;}
span{font-size:0.8em;}

<div><input type="checkbox" /> UN-Checked and unstyled <span>(too bright)</span></div>
<div><input type="checkbox" checked /> Checked and unstyled</div>
<hr>
<div><input type="checkbox" class="accent" /> UN-Checked with opacity <span>(less glaring)</span></div>
<div><input type="checkbox" class="accent" checked id="two"/> Checked with accent-color</div>
<button id="btn">Change background color</button>