是否可以通过一次点击切换两个CSS`：checked`伪类？ [英] Is it possible to toggle two CSS `:checked` pseudo-classes with one click?

问题描述

请注意，

Jade

 输入＃country-selector（type ='radio'，name =country）
  

SCSS

 &> [type = checkbox] 
  

p>

 &> [type = radio] 
  

我对笔进行了一些样式更改，并将其与更传统的选择下拉菜单配合使用。

非常有趣的想法。 Kudos就是这样。

Please note that I am aware of this question but I am looking for specifically a technical answer.

As a CSS challenge to myself I'm trying to create a fancy select box using only CSS. Using a variety of fancy techniques that I've learned recently, I've gotten pretty far.

Codepen Here

• It looks good
• Is fully style-able,
• It opens up in a list on click (using a hidden checkbox and a :checked+label selector)
• Allows placeholder text (using :checked and a negative margin-top)
• Allows selection (using a nested radio button list)
• And displays value properly when selected and collapsed (using :checked and position: absolute)
• It will even bind javascript correctly

This is using a structure similar to

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

I have just one problem left, once expanded, closing the menu on click doesn't work properly. A normal selectbox will close when clicking on an item. Mine won't until you click near the border of the selectbox.

That is because the user is clicking on the inner input which won't toggle the :checked state of the parent label, they need to click around the input to close the selectbox.

Is there any way to make both the radio button state and the parent state toggle at the same time?

解决方案

Possible you might be overcomplicating this a bit.

Why not just change your .country-selector checkbox into a radio button in the same group? Then it has exactly the behavior you're looking for without making it a situation that requires lots of workaround. The only concern would be providing an empty value for if the user were to submit while the box is still open, but that's a concern with your existing implementation anyhow.

Codepen Example

Jade

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

SCSS

&>[type=checkbox]

becomes

&>[type=radio]

I made a few styling changes to the pen as well to bring it inline with more traditional select dropdowns.

Very interesting idea. Kudos on that.

这篇关于是否可以通过一次点击切换两个CSS`：checked`伪类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！