CSS :after 伪元素结合 [checked]: 不同的后元素不起作用？答案

【问题标题】：CSS :after pseudo-element combined with [checked]: different after-elements not working?CSS :after 伪元素结合 [checked]: 不同的后元素不起作用？
【发布时间】：2011-09-06 22:43:02
【问题描述】：

我正在尝试通过设置我自己的单选按钮和复选框的样式来启动我的 Web 表单。为此，我隐藏了单选框/复选框本身，并使用 :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 伪类一样会覆盖它的独立部分。

我在这里错过了什么重要的东西吗？

问候

【问题讨论】：

你能在jsfiddle.net上做一个演示吗？这会有所帮助。
哦，很高兴看到你解决了它！我想你可以把那个编辑变成一个答案。
继续post your solution as an answer！
我会尽快 => 信誉低于 100 的用户在提问后 8 小时内无法回答自己的问题。您可以在 7 小时内自行回答。在此之前，请使用 cmets，或改为编辑您的问题。

标签： css pseudo-class pseudo-element

【解决方案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 元素上设置绝对位置（在标签内显示它们）我监督的是，这样，只有选中的标签是相对的。因此，在未经检查的元素上创建的任何 :after 元素的绝对位置导致将它们定位在屏幕之外。

解决方法：让每个标签位置：从头开始相对。

不便之处，敬请原谅

【讨论】：