:checked 不能在带有伪元素的 CSS 中工作答案

【问题标题】：:checked not working in css with pseudo elements:checked 不能在带有伪元素的 CSS 中工作
【发布时间】：2020-03-05 17:23:25
【问题描述】：

我正在处理我的 html 由 drupal 生成的项目，因此我无法修改我的 Html 文件。我遇到了需要制作自定义复选框的问题，尽管我制作了一个复选框，但我无法制作一个复选标记。

这是我的代码

#login-nav input[type="checkbox"] {
    display: none;
}

#login-nav input[type="checkbox"] label:before {
    padding: 0;
    position: absolute;
}

#login-nav input[type=checkbox]+label:before {
    background-color: #fff;
    border: 1px solid #444;
    content: "";
    font-family: "Arial";
    font-style: normal;
    height: 16px;
    left: 0;
    line-height: 16px;
    margin-right: 0;
    padding-left: 2px;
    position: absolute;
    top: 3px;
    width: 16px;
    font-size: 12px;
}



#login-nav input[type=checkbox]:checked~label::after {
    background-color: rgb(107, 194, 0);
    color: rgb(255, 255, 255);
    content: "✔";
    border-width: 1px;
    border-style: solid;
    border-color: rgb(107, 194, 0);
    border-image: initial;
    position: absolute
}

<form class="form" id="login-nav">
<div class="checkbox">
    <input type="checkbox">
    <label>Remember me</label>
     <a href="en/forgot-password.html" class="omb_forgotPwd pull-right"> Forgot password? </a>
 </div>
 </form>

【问题讨论】：

这个选择器：#login-nav input[type="checkbox"] label:before 不会匹配任何东西，因为 input 元素不能有后代......我认为你缺少像 + 或 ~ 这样的组合器。请注意，您使用的不是一致的。在所有地方都使用+ 或~，否则您会遇到这些问题。

标签： html css forms checkbox

【解决方案1】：

不要在您的输入中使用display: none，而是使用opacity: 0 隐藏复选框。这样，复选框仍然是可点击的。然后，设置input[type="checkbox"] 的尺寸以匹配您的样式输入（16px 宽度和高度），并确保实际复选框呈现在样式的顶部（使用position: relative 和z-index : 1）所以它仍然可以接收点击事件。

#login-nav .checkbox {
  position: relative;
}

#login-nav input[type="checkbox"] {
    position: relative;
    opacity: 0;
    z-index: 1;
    width: 16px;
    height: 16px;
    margin-top: 3px;
}

#login-nav input[type="checkbox"] label:before {
    padding: 0;
    position: absolute;
}

#login-nav input[type=checkbox]+label:before {
    background-color: #fff;
    border: 1px solid #444;
    content: "";
    font-family: "Arial";
    font-style: normal;
    height: 16px;
    left: 0;
    line-height: 16px;
    margin-right: 0;
    padding-left: 2px;
    position: absolute;
    top: 3px;
    width: 16px;
    font-size: 12px;
}



#login-nav input[type=checkbox]:checked~label::before {
    background-color: rgb(107, 194, 0);
    color: rgb(255, 255, 255);
    content: "✔";
    border-width: 1px;
    border-style: solid;
    border-color: rgb(107, 194, 0);
    border-image: initial;
}

<form class="form" id="login-nav">
<div class="checkbox">
    <input type="checkbox">
    <label>Remember me</label>
     <a href="en/forgot-password.html" class="omb_forgotPwd pull-right"> Forgot password? </a>
 </div>
 </form>

【讨论】：