作为对自己的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

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

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

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