只需点击一下,是否可以切换两个CSS`:checked`伪类？

Question

请注意,我知道这个问题,但我正在寻找具体的技术答案.

作为对自己的CSS挑战,我正在尝试select使用CSS 创建一个奇特的盒子.使用我最近学到的各种奇特技术,我已经走得很远了.

Codepen在这里

• 看起来不错
• 完全风格,
• 它在点击列表中打开(使用隐藏的复选框和:checked+label选择器)
• 允许占位符文本(使用:checked和负边距 - 顶部)
• 允许选择(使用嵌套的单选按钮列表)
• 并在选择和折叠时正确显示值(使用:checked和position: absolute)
• 它甚至可以正确绑定javascript

这是使用类似的结构

input[type=checkbox]#selector
label[for=selector]
    ul
        li.item1
            input[type=radio]#item1
            label[for=item1] The First Item 

我只剩下一个问题,一旦展开,点击菜单关闭不能正常工作.单击某个项目时,正常的选择框将关闭.直到你在选择框的边框附近点击,我才会这样做.

这是因为用户点击内部输入不会切换:checked父标签的状态,他们需要点击输入以关闭选择框.

有没有办法让单选按钮状态和父状态同时切换？

Answer 1

可能你可能会过度复杂这一点.

为什么不将.country-selector复选框更改为同一组中的单选按钮？然后它具有您正在寻找的行为,而不会使其成为需要大量解决方法的情况.唯一的问题是如果用户在框仍然打开时提交一个空值,但无论如何这都与您现有的实现有关.

Codepen示例

玉

input#country-selector(type='radio', name="country")

SCSS

&>[type=checkbox]

变

&>[type=radio]

我对笔进行了一些样式更改,以便将其与更传统的选择下拉列表联系起来.

非常有趣的想法.感谢你.