CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了是否可以一键切换两个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]

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

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

大佬总结

以上是大佬教程为你收集整理的是否可以一键切换两个CSS`:checked`伪类?全部内容,希望文章能够帮你解决是否可以一键切换两个CSS`:checked`伪类?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。