Question

我试图通过设置我自己的单选按钮和复选框来启动我的Web表单。为此，我隐藏了radio / checkbox本身，并使用：after伪类在标签上创建一个状态指示元素，如下所示：

.pn_multi label{
    display:    inline-block;
    border:     1px dotted #FFF;

    opacity:    0.6;

    text-align: center;
}
.pn_multi label:hover{
    border:     1px dotted #444;
    opacity:    0.8;
}

.pn_multi input[type=radio]:checked + label, .pn_multi input[type=checkbox]:checked + label {
    background: #CCE6FF;
    border:     1px dotted #FFF;
    opacity:    1.0;
    position:   relative;
}

/* generic icon */
.pn_multi input[type=radio]:checked + label:after, .pn_multi input[type=checkbox] + label:after {

    display:    block;
    position:   absolute;
    right:      1px;
    bottom:     1px;
    overflow:   hidden;

        /* a lot more styling here, took out for space */
}

/* specific icon colors*/
.pn_multi input[type=checkbox] + label:after {
    content: "\2714  ";
    background: #FF9393;
    color:      #F22;
    border:     1px solid #F22;
}
.pn_multi input[type=radio]:checked + label:after, .pn_multi input[type=checkbox]:checked + label:after {
    content: "X  ";
    background: #97FF97;
    color:      #063;
    border:     1px solid #063;
}

现在，这对于无线电来说非常好。我点击标签，标签上出现小标记框，而不是其他标签。但问题是复选框：虽然已检查的那些仍然显示绿色复选框，未经检查的那些，根本没有显示，而不是它应该是的红色。它好像是

.pn_multi input[type=checkbox] + label:after

部分根本没有抓到，或者像：checked伪类会覆盖它的独立。

我错过了一些重要的东西吗？

此致

Answer 1

拍摄！通过像BoltClock建议的那样将代码复制到jsfiddle，发现了我自己的错误，尽管最后没有使用它。

问题是这部分代码

.pn_multi input[type=radio]:checked + label, 
.pn_multi input[type=checkbox]:checked + label {
    background: #CCE6FF;
    border:     1px dotted #FFF;
    opacity:    1.0;
    position:   relative;
}

确切地说，位置：相对。我需要这个只是为了能够在：after元素上设置绝对位置（以显示它们--inside-标签）我所监督的是，通过这种方式，只有经过检查的标签是相对的。因此，在未经检查的元素上创建的任何元素之后的绝对位置导致将它们定位在屏幕之外。

解决方案：制作每个标签位置：从头开始相对。

感谢和抱歉给您带来不便

CSS：伪元素与[checked]结合后：不同的后元素不起作用？

1 个答案: