更改时未显示复选框中的复选标记 CSS

Question

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

添加 "content: '✔';" 是否在 CSS 中做了任何我想完成的事情，还是我使用不正确？

例如：

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

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

Here's another fiddle 选中该框时使用复选标记尝试执行的操作。

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

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

Answer 1

content property currently only applies to pseudo elements such as :before/:after.

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

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

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

利用 adjacent sibling combinator, +，以更改自定义 label element/pseudo 元素的样式：

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

Checkmark in checkbox not appearing when changing CSS

html

css

checkbox

FIDDLE