javascript - CSS 如何设置自定义复选框勾号的 "content"/"background"属性的样式？

Question

我创建了一个自定义复选框，一切正常。我想知道是否有样式\操作 content 或 background 属性的选项。我使用了自定义刻度符号，但它位于底部太多，我该如何将它提高几个像素？
期望的结果:

JSfiddle

HTML:

        <input type='checkbox' value='valuable4' id="valuable4"/>
        <label for="valuable4">
            <span></span>
        </label>

CSS:

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

label span
{
    height: 25px;
    width: 25px;
    position: absolute;

    left: 107px;
    cursor: pointer;
    border: 1px solid lightblue;
}
input[type=checkbox]:checked + label span
{
    content: url("https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png") no-repeat;
    height: 25px;
    width: 25px;
    cursor: pointer;
     border: 1px solid red;
}

Answer 1

现在这应该正是您要查找的内容。您可以安全地省略 <span> , 不需要。

input[type=checkbox] {
    display: none;
}
label {
    height: 25px;
    width: 25px;
    position: absolute;
    display: block;
    left: 107px;
    cursor: pointer;
    border: 1px solid lightblue;
}
input[type=checkbox]:checked + label {
    border: 1px solid red;
}
input[type=checkbox] + label:after {
    background: url("https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png") no-repeat;
    background-size: cover;
    content:" ";
    display: block;
    opacity: 0;
    height: 30px;
    transition-duration: 0.2s;
    width: 30px;
    position: relative;
    right: -4px;
    top: -8px;
}
input[type=checkbox]:checked + label:after {
    opacity: 1;
}

http://jsfiddle.net/39qkjs6k/5/

这里发生了什么？基本上，您创建一个伪元素(大多数 html 元素都可用):after你应用background至(这将替换您之前使用的 <span>)。您将它相对定位在其父级内部 <label> right: -4px; top: -8px; .取消选中该复选框，它有 opacity: 0; ，所以它是完全透明的，使其不可见。在:checked旁边复选框，它得到 opacity: 1; ，使其完全可见。 transition-duration: 0.2s;确保可转换属性的所有更改都在平滑的动画中完成，而不是突然更改。