CSS如何设置自定义复选框刻度标记的“内容”/“背景”属性？

时间：2015-05-20 10:18:23

标签： javascript css checkbox

我创建了一个自定义复选框，一切正常。我想知道是否可以选择样式\操纵content或background属性。我使用了一个自定义刻度标记，但它位于底部太多，我怎么能将它提高几个像素？
期望的结果：

enter image description here
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;
}

2 个答案:

答案 0 :(得分：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;确保可转换属性中的所有更改都以平滑动画完成，而不是仅仅突然更改。

答案 1 :(得分：1)

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

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

可以根据需要使用顶部/左侧值将伪元素移动到正确的位置

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
}

＆＃13;
＆＃13; 
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
}
＆＃13; 
<input type='checkbox' value='valuable4' id="valuable4" />
<label for="valuable4">
</label>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题