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

Question

我创建了一个自定义复选框，一切正常。我想知道 style\manipulate 或 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; 确保可转换属性的所有更改都在平滑的动画中完成，而不是突然更改。

Answer 2

我想你需要这个作为伪元素和标签。

您可以使用标签作为“复选框”的基本状态，然后使用绝对定位在标签的顶部应用伪元素。

可以根据需要使用top/left值将伪元素移动到正确的位置

label { height: 25px; width: 25px; left: 107px; cursor: pointer; border: 1px solid lightblue; position: relative; display: inline-block; } input[type=checkbox]:checked + label::before { position: absolute; content:''; background: url("https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png") no-repeat; background-size: contain; width: 100%; height: 100%; top:-8px; left:8px }

input[type=checkbox] { visibility: hidden; } label { height: 25px; width: 25px; left: 107px; cursor: pointer; border: 1px solid lightblue; position: relative; display: inline-block; } input[type=checkbox]:checked + label { border-color: Red; } input[type=checkbox]:checked + label::before { position: absolute; content: ''; background: url("https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png") no-repeat; background-size: contain; width: 100%; height: 100%; top: -8px; left: 8px }

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

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

CSS how to style the "content"/"background" attribute of a custom checkbox tick sign?

javascript

css

checkbox