我正在尝试通过设计自己的单选按钮和复选框来启动我的 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;
}
现在,这对于 radio 来说效果非常好。我单击标签,小复选框出现在标签上,而不是其他标签上。 但问题是复选框: 虽然选中的仍显示绿色复选框,但未选中的则根本不显示任何内容,并且不是应有的红色复选框。看起来像是
.pn_multi input[type=checkbox] + label:after
部分根本不抓人,或者像 :checked 伪类一样会覆盖它的独立部分。
我在这里错过了一些重要的事情吗?
问候
最佳答案
开枪! 通过像 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;
}
准确地说,position:relative。我需要这个只是为了能够在 :after 元素上设置绝对位置(以在标签内显示它们) 我所监督的是,通过这种方式,只有选中的标签才是相对的。 因此,在未经检查的元素上创建的任何 :after 元素的绝对位置都会导致将它们定位在屏幕之外。
解决方案:从一开始就将每个标签设置为position:relative。
感谢您的配合,对于给您带来的不便,我们深表歉意
关于CSS :after pseudo-element combined with [checked]: different after-elements not working?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7327004/