更改CSS时,复选框中没有出现复选标记

Question

我正在尝试使用CSS更改复选框的大小,颜色等.当我选中此框时,我将所有内容格式化为我想要的方式.选中此框后,检查/刻度标记不会出现,似乎没有任何结果.但是,我知道它的工作原理是因为我可以设置背景颜色来改变,然后就可以了.

添加"内容:'✔';" 在CSS中做任何我想要完成的事情,或者我是否正确地使用它？

例如:

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

这是一个小提琴,演示了复选框更改的背景颜色.

这是我在选中复选框时使用复选标记尝试做的另一个小提琴.

编辑 - 我正在使用chrome,这似乎是个问题.我检查了Firefox,它的工作原理

知道了这一点,我能做些什么来完成我所描述的内容？

Answer 1

该content属性目前仅适用于伪元素,如:before/:after.

众所周知,复选框元素很难设计(并非所有浏览器都允许您指定height/ width;而且,它们是自封闭的元素,这意味着它们不能包含伪元素.

因此,用于创建自定义的复选框中最常见的做法是隐藏的input/ checkbox元素和风格成功label通过伪元素的元素.例如:

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

利用相邻的兄弟组合器,+以改变自定义的样式label元素/伪元素:

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

这里的例子

这将帮助您入门.相应的风格.

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>