html - 更改 CSS 时复选框中的复选标记未出现

Question

我正在尝试使用 CSS 更改复选框的大小、颜色等...。除了选中框时，我已经按照我想要的方式设置了所有格式。选中该框后，不会出现复选/勾选标记，似乎什么也没有发生。但是，我知道它可以以其他方式工作，因为我可以设置要更改的背景颜色，然后它就可以工作了。

是否添加“内容:'✔';”在 CSS 中做任何我想要完成的事情，还是我使用不正确？

例如:

input[type=checkbox]:checked {
    content: '✔';
    background-color:white;
}

Here's a fiddle演示了复选框背景颜色的变化。

Here's another fiddle选中该框时使用复选标记来说明我正在尝试执行的操作。

编辑 - 我正在使用 chrome，这似乎是问题所在。我检查了 firefox 并且它有效

知道了这一点，我可以做些什么来完成我所描述的？

Answer 1

content属性目前仅适用于 pseudo elements例如:before/:after .

众所周知，复选框元素很难设置样式(并非所有浏览器都允许您指定高度/宽度；此外，它们是自封闭元素，这意味着它们不能包含伪元素。

因此，创建自定义复选框的最常见方法是隐藏 input/checkbox 元素并通过伪元素。例如:

<input type="checkbox" id="checkbox1">
<label for="checkbox1"></label>

利用 adjacent sibling combinator, + , 为了改变自定义 label 元素/伪元素的样式:

input[type="checkbox"]:checked + label {}

Example Here

这会让你开始。相应的样式。

input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label {
    display: inline-block;
    border: 1px solid #000;
    width: 30px;
    height: 30px;
    position: relative;
}
input[type="checkbox"]:checked + label:after {
    content: '✔';
    display: inline-block;
    font-size: 1.6em;
}

<input type="checkbox" id="checkbox1">
<label for="checkbox1"></label>