复选框未显示为已选中

Question

我是html（和javascript）的初学者，我正在制作一个项目来练习我学到的东西。因此，我正在尝试通过样式设置自定义复选框。这是它的CSS：

input[type=checkbox]{
    -webkit-appearance: none;
    outline: none;
    height: 20px;
    width: 20px;
    border: 1px solid black;
    color: black;
    background-color: rgb(168, 168, 75);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    display: inline-block;
    position: relative;
}

这是我得到的结果：

如果单击它，则什么也没有发生。如果有人对我的工作方式提出任何建议，我将不胜感激！

注意：我在Stack Overflow上没有发现任何与我的问题有关的东西或与之相关的任何最新帖子。

Answer 1

由于您没有给出:checked状态，因此它不起作用。您必须明确指定，如下所示：

input[type=checkbox]:checked {
  background-color: #000;
}

适合您的完整代码段：

* {
  font-family: 'Segoe UI';
}

label {
  cursor: pointer;
}

input[type=checkbox] {
  -webkit-appearance: none;
  outline: none;
  height: 20px;
  width: 20px;
  border: 1px solid black;
  color: black;
  background-color: rgb(168, 168, 75);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

input[type=checkbox]:checked {
  background-color: #000;
}

<label><input type="checkbox" /> Check me!</label>

注意：我添加了vertical-align: middle，以便它与文本一起很好地显示。 ;)

Answer 2

input[type=checkbox]{
    -webkit-appearance: none;
    outline: none;
    height: 20px;
    width: 20px;
    border: 1px solid black;
    color: black;
    background-color: rgb(168, 168, 75);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    display: inline-block;
    position: relative;
}

input[type=checkbox].type1:checked:after {
    content: '✓';    /* or '\2713', or '\2714' */
    text-align: center;
    vertical-align: middle;
    position: absolute;
    height: 1em;
    width: 1em;
    line-height: 1;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

input[type=checkbox].type2:checked:after {
    content: '';
    position: absolute;
    height: 60%;
    width: 30%;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-22%) rotate(45deg);
    transform: translateY(-22%) rotate(45deg);
    border-right: 2px solid red;
    border-bottom: 2px solid red;
}

<label><input type="checkbox" class="type1" /> Test</label>
<label><input type="checkbox" class="type2" /> Test</label>