FIDDLE

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。

复选框元素非常难以设置样式（并非所有浏览器都允许您指定height / width;此外，它们是自封闭元素，这意味着它们不能包含伪元素。

因此，创建自定义复选框的最常用方法是隐藏 input / checkbox元素，并通过伪元素设置后续label元素的样式。例如：

<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>

Answer 2

正如Josh Crozier所说，content仅适用于:before和:after。而且您正在尝试将其添加到input。您可以使用css过渡创建一个复选标记，以获得更好的效果：

<强> HTML

<div class="custom">
   <input type="checkbox" value="None" id="checkmark" name="check" />
   <label for="checkmark"></label>
</div>

<强> CSS

input[type=checkbox] {
    visibility: hidden;
}

.custom {
    position: relative;
}

.custom label {
    cursor: pointer;
    position: absolute;
    top: 0;
    -webkit-appearance: none;
    border: double 2px #8C8C8C;
    background-color:white;
    color:#FFF;
    white-space: nowrap;
    width:35px;
    height:35px;

}

.custom label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 14px;
    height: 8px;
    background: transparent;
    top: 8px;
    left: 8px;
    border: 3px solid #000;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.custom label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.custom input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

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

2 个答案:

FIDDLE