我有一个如下所示的复选标记，我想使用复选标记作为复选框，我不希望勾号出现在复选框内。我希望能够点击勾号以便它被选中。它应该像一个复选框，但没有框，如果这可以在 css 中完成，有什么建议吗？
.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}
.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>自定义复选框很难，首先需要一个复选框。
您将需要一个复选框来保存支票的价值。并且您需要为标签设置样式，并隐藏复选框，以便您只能看到标签，并且该标签将能够与复选框进行交互。
试试这个：
.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
input[type="checkbox"] { display: none; }
.checkmark:before {
content: '';
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}
.checkmark {
cursor: pointer;
}
.checkmark:after {
content: '';
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}
input[type="checkbox"]:checked + .checkmark:before,
input[type="checkbox"]:checked + .checkmark:after {
background-color: green;
}<input type="checkbox" id="cb">
<label for="cb" class="checkmark"></label>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句