如何在css中使用复选标记作为复选框[关闭]

Question

我有一个复选标记，如下所示，我想使用复选标记作为复选框，我不希望勾选显示在复选框内。我希望能够点击勾选，以便它被选中。它应该像一个复选框，但没有框，任何建议，如果这可以在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>

Answer 1

自定义复选框很难，首先需要一个复选框。

您需要一个复选框来保存支票的价值。并且您需要设置标签的样式，并隐藏复选框，以便您只能看到标签，并且此标签将能够与复选框进行交互。

试试这个：

.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>

Answer 2

你的意思是？

.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;
}

.checkbox-hidden {
	display: none;
}
.checkbox-hidden:checked + label .checkmark_stem, .checkbox-hidden:checked + label .checkmark_kick {
	background-color: #4caf50;
}

<input type="checkbox" class="checkbox-hidden" id="checkbox"> 
	<label class="checkmark" for="checkbox">
	    <div class="checkmark_stem"></div>
	    <div class="checkmark_kick"></div>
	</label>