CSS :after 伪元素与 [checked] 结合：不同的 after-element 不起作用？
我试图通过设计自己的单选按钮和复选框来启动我的 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 伪类会覆盖它的独立部分。
我在这里错过了一些重要的事情吗？
问候
I am trying to kick up my Web forms by styling my own radiobuttons and checkboxes.
To do this, I hide the radio/checkbox itself and create a state-indicating element on the label with the :after pseudo-class, like this:
.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;
}
Now, this works perfetly fine for the radios. I click on the label, and the little tickbox appears on the label, and on no other.
But the problem are the checkboxes:
While the checked ones still show the green tickbox, the unchecked ones, show none at all, and not the red one as it is supposed to be. it seems like the
.pn_multi input[type=checkbox] + label:after
part is not gripping at all, or like the :checked pseudo-class would overwrite its standalone.
Am i missing something major here?
Regards
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
射击！
通过像 BoltClock 建议的那样将代码复制到 jsfiddle 发现了我自己的错误，尽管最终没有使用它。
问题在于这部分代码，
准确地说，是position:relative。我需要这个只是为了能够在 :after 元素上设置绝对位置（以在标签内显示它们）
我所监督的是，通过这种方式，只有选中的标签才是相对的。
因此，在未经检查的元素上创建的任何 :after 元素的绝对位置都会导致将它们定位在屏幕之外。
解决方案：从一开始就使每个标签位置：相对。
感谢并抱歉给您带来不便
Shoot!
Found my own error by copying the code to jsfiddle like BoltClock suggested it, though not using it in the end.
The porblem is this part of code
To be exact, the position:relative. I needed this just to be able to set absolute positions on the :after elements (to show them -inside- the label)
What i oversaw was, that this way, only the checked labels were made relative.
Thus the absolute position of any :after elements created on unchecked elements resulted in positioning them outside the screen.
Solution: made every label position:relative from the beginning.
Thanks and sorry for inconvenience