自定义复选标记未显示

Question

我正在尝试创建一个自定义单选复选框，但由于某种原因没有显示复选标记，您无法单击并取消选中以显示复选标记。

是否可以使其显示并可点击此复选标记？

input[type="checkbox"], input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.here .checkmark {
    display: inline-block;
	margin-right: 20px;
    height: 40px;
    width: 40px;
    background-color: yellow;
}

.here .checkmark:hover {
    background-color: red;
}

.here inp_cont:checked ~ .checkmark {
    background-color: black;
}

.here .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.here inp_cont:checked ~ .checkmark:after {
    display: block;
}

.here .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

<div class="here"><span class="checkmark"></span> 
        <input type="checkbox" checked="checked" name="hello" id="hello" class='inp_cont' required value="here" /> Click in the box</div>

Answer 1

您的代码存在许多问题（尽管不是您的方法）。

1. 用户无需点击。解决方案：将带有class =“checkmark”的范围转换为输入标签。
2. 在评论中注明@ j08691，inp_cont不存在。解决方案：将其更改为复选框的选择器;在这种特殊情况下，只需要input（因为只有一个）。
3. 您在CSS中有input:check ~ .checkmark，但如果.checkmark在输入源之后，那么这将会起作用。解决方案：交换它们。

然后它有效。

input[type="checkbox"], input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.here .checkmark {
    display: inline-block;
	margin-right: 20px;
    height: 40px;
    width: 40px;
    background-color: yellow;
}

.here .checkmark:hover {
    background-color: red;
}

.here input:checked ~ .checkmark {
    background-color: black;
}

.here .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.here input:checked ~ .checkmark:after {
    display: block;
}

.here .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

<div class="here">
 <input type="checkbox" checked="checked" name="hello" id="hello" class='inp_cont' required value="here" />
 <label for="hello" class="checkmark"></label>
 Click in the box</div>