html - 自定义复选标记不显示

我正在尝试创建一个自定义单选复选框，但由于某些原因未显示该复选标记，您无法单击并取消单击以使该复选标记出现。

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

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>

最佳答案

您的代码有很多问题（尽管您的方法并非如此）。


用户没有任何可单击的。解决方案：将带有class =“ checkmark”的范围变成输入的标签。
正如@ j08691在注释中所指出的，inp_cont不存在。解决方案：将其更改为复选框的选择器；在这种情况下，只需input即可（因为只有一个）。
您在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>

关于html - 自定义复选标记不显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48952096/