是否可以一键切换两个CSS`：checked`伪类？

请注意0​​7000,但我正在寻找一个技术答案.

作为对自己的CSS挑战,我试图用CSS创建一个花哨的选择框.使用I’ve learned recently的各种花哨技巧,我已经相当遥远.

Codepen Here

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

这是使用类似的结构

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

我只剩一个问题,一旦扩展,关闭点击菜单不能正常工作.点击一个项目时,正常的选择框将会关闭.直到你点击选择框边框附近的地雷才会发生.

这是因为用户正在点击不会切换父标签的内部输入：他们需要点击输入关闭选择框.

是否有任何方法使单选按钮状态和父状态同时切换？

解决方法

可能你可能会略过这一点.

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

Codepen Example

玉

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

SCSS

&>[type=checkBox]

变

&>[type=radio]

我对笔进行了一些造型改变,并将其与更传统的选择下拉列表一起使用.

非常有趣的想法对此有道理.

原文地址：https://www.jb51.cc/css/217060.html