如何在自定义复选框中创建刻度线？

Question

我想用CSS做一个自定义复选框，但不知道它是如何做到的。

.custom-checkbox { 
 
    border: 3px solid #7e8a94; 
 
    float: right; 
 
    height: 20px; 
 
    width: 20px; 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
} 
 

 
.custom-checkbox.hover { 
 
    border: 3px solid #43D8B0; 
 
} 
 

 
.custom-checkbox.active { 
 
    border: 3px solid #43D8B0; 
 
} 
 

 
.custom-checkbox.active.checkmark {}

<input type='checkbox' class='checkbox'> 
 
<div class="custom-checkbox"> 
 
    <div class="checkmark"></div> 
 
</div>

我添加active类custom-checkbox上检查，但不知道如何在一个盒子里创建一个勾呢？

Answer 1

您必须手动定制您的input &以使用伪元素的方式添加label以在您想要的复选框中获得所需的效果。

另外，你可以在你的css中使用content: '✔';来点击打勾。

我建你演示引用，请检查下面的代码：

[type="checkbox"]:not(:checked), 
 
[type="checkbox"]:checked { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 

 
[type="checkbox"]:not(:checked)+label, 
 
[type="checkbox"]:checked+label { 
 
    position: relative; 
 
    padding-left: 25px; 
 
    cursor: pointer; 
 
} 
 

 
[type="checkbox"]:not(:checked)+label:before, 
 
[type="checkbox"]:checked+label:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: -5px; 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #fff; 
 
    border-radius: 3px; 
 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1); 
 
    border-radius: 50%; 
 
    background-color: #5cf1b3; 
 
    outline: none; 
 
} 
 

 
[type="checkbox"]:not(:checked)+label:after, 
 
[type="checkbox"]:checked+label:after { 
 
    content: '✔'; 
 
    position: absolute; 
 
    top: 8px; 
 
    left: 10px; 
 
    font-size: 24px; 
 
    line-height: 0.8; 
 
    color: #fff; 
 
    transition: all .2s; 
 
} 
 

 
[type="checkbox"]:not(:checked)+label:after { 
 
    opacity: 0; 
 
    transform: scale(0); 
 
} 
 

 
[type="checkbox"]:checked+label:after { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
}

<p> 
 
    <input type="checkbox" id="test1" /> 
 
    <label for="test1"></label> 
 
</p>

Answer 2

您可以在下面片断

/* Base for label styling */ 
 
[type="checkbox"]:not(:checked), 
 
[type="checkbox"]:checked { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 
[type="checkbox"]:not(:checked) + label, 
 
[type="checkbox"]:checked + label { 
 
    position: relative; 
 
    padding-left: 1.95em; 
 
    cursor: pointer; 
 
} 
 

 
/* checkbox aspect */ 
 
[type="checkbox"]:not(:checked) + label:before, 
 
[type="checkbox"]:checked + label:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    width: 1.25em; height: 1.25em; 
 
    border: 2px solid #ccc; 
 
    background: #fff; 
 
    border-radius: 4px; 
 
    box-shadow: inset 0 1px 3px rgba(0,0,0,.1); 
 
} 
 
/* checked mark aspect */ 
 
[type="checkbox"]:not(:checked) + label:after, 
 
[type="checkbox"]:checked + label:after { 
 
    content: '✔'; 
 
    position: absolute; 
 
    top: .1em; left: .3em; 
 
    font-size: 1.3em; 
 
    line-height: 0.8; 
 
    color: #09ad7e; 
 
    transition: all .2s; 
 
} 
 
/* checked mark aspect changes */ 
 
[type="checkbox"]:not(:checked) + label:after { 
 
    opacity: 0; 
 
    transform: scale(0); 
 
} 
 
[type="checkbox"]:checked + label:after { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
} 
 
/* disabled checkbox */ 
 
[type="checkbox"]:disabled:not(:checked) + label:before, 
 
[type="checkbox"]:disabled:checked + label:before { 
 
    box-shadow: none; 
 
    border-color: #bbb; 
 
    background-color: #ddd; 
 
} 
 
[type="checkbox"]:disabled:checked + label:after { 
 
    color: #999; 
 
} 
 
[type="checkbox"]:disabled + label { 
 
    color: #aaa; 
 
} 
 
/* accessibility */ 
 
[type="checkbox"]:checked:focus + label:before, 
 
[type="checkbox"]:not(:checked):focus + label:before { 
 
    border: 2px dotted blue; 
 
} 
 

 
/* hover style just for information */ 
 
label:hover:before { 
 
    border: 2px solid #4778d9!important; 
 
}

<p> 
 
    <input type="checkbox" id="test1" /> 
 
    <label for="test1">Red</label> 
 
    </p> 
 
    <p> 
 
    <input type="checkbox" id="test2" checked="checked" /> 
 
    <label for="test2">Yellow</label> 
 
    </p> 
 
    <p> 
 
    <input type="checkbox" id="test3" checked="checked" disabled="disabled" /> 
 
    <label for="test3">Green</label> 
 
    </p> 
 
    <p> 
 
     <input type="checkbox" id="test4" disabled="disabled" /> 
 
     <label for="test4">Brown</label> 
 
    </p>

定制检查不同，不同的状态 checkbox

Answer 3

您将需要使用:checked伪类。在下面的示例中，它使用span标记创建自定义复选框样式，并使用伪元素:before以及特殊字符✔作为标记。

.custom-checkbox input { 
 
    display: none; 
 
} 
 

 
.custom-checkbox span { 
 
    border: 3px solid #7e8a94; 
 
    float: right; 
 
    height: 20px; 
 
    width: 20px; 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.custom-checkbox:hover span, 
 
.custom-checkbox input:checked + span { 
 
    border: 3px solid #43D8B0; 
 
} 
 

 
.custom-checkbox input:checked + span:before { 
 
    content: "✔"; 
 
}

<label class="custom-checkbox"> 
 
    <input type="checkbox"> 
 
    <span></span> 
 
</label>