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

Question

请注意I am aware of this question，但我正在寻找专门的技术答案。

作为对自己的 CSS 挑战，我正在尝试仅使用 CSS 创建一个精美的 select 框。使用I've learned recently 的各种花哨技术，我已经走得很远了。

Codepen Here

• 看起来不错
• 完全可以风格化，
• 点击后会在列表中打开（使用隐藏的复选框和: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 Example

翡翠

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

SCSS

&>[type=checkbox]

变成

&>[type=radio]

我还对笔进行了一些样式更改，使其与更传统的选择下拉菜单保持一致。

非常有趣的想法。对此表示赞赏。

Answer 2

编辑

Internet Explorer 将处理透明元素，例如 event-pointer:none;有一个必须添加背景颜色+不透明度：0。现在至少可以在 Internet Explorer 中打开它：http://codepen.io/anon/pen/EargxL

编辑 2

我终于找到了一种支持Internet Explorer的方法，它看起来有点糟糕，我改天重构它：p http://codepen.io/anon/pen/ogmqpq

请注意它不适用于大多数移动设备，因为不实现 :active pseudo-selector: http://www.quirksmode.org/css/selectors/mobile.html#link5

原创

简而言之，通过选中的选择器在不同的输入上一键触发两次切换几乎是不可能的。

如何将 :focus 伪选择器与 :active 结合使用。

<div class="dropDown">
    <div class="toggle" tabindex="0"></div>
    <ul class="list" tabindex="0">
        <li>
            <label>
                <input type="radio" name="myDropDown" value="someValue" checked="checked"/>
                <span>Item 1</span>
            </label>
        </li>
        <li>
            <label>
                <input type="radio" name="myDropDown" value="someValue"/>
                <span>Item 2</span>
            </label>
        </li>
        <li>
            <label>
                <input type="radio" name="myDropDown" value="someValue"/>
                <span>Item 3</span>
            </label>
        </li>
    </ul>
</div>

CSS：

ul {
    list-style:none;
}
input {
    display:none;
}
.dropDown {
    position:relative;
}
.dropDown .toggle {
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
    outline:none;
}
.dropDown > .toggle:focus {
    z-index:0;
}
.dropDown > .list {
    position:relative;
    outline:none;
}
.dropDown > .list:active {
    z-index:1;
}
.dropDown > .toggle:not(:focus) + .list:not(:active) input:not(:checked) + span {
    display:none;
}

现场示例http://codepen.io/anon/pen/emxJWr

注意： 这在 Internet Explorer 中不起作用，因为 :active 没有冒泡，我愿意接受任何建议！

Answer 3

只是为了好奇 pointer-events：双击 input:checked + label 将允许您在此处关闭您喜欢的选择器：http://codepen.io/gc-nomade/pen/NPJaNa

.options {
      &>li{
        &:hover {
          background-color: blue;
        }
        input[name=country]:checked+label {
          position: static;
          pointer-events:none;}
      }
    }

Answer 4

更改 z-index 将允许用户单击切换下拉列表的标签区域。

查看我更新的代码笔： codepen ex

  .country-selector {
  display: inline-block;
  border: 1px solid black;
  position: relative;
  overflow: hidden;

  &:before {
    content: "▾";
    position: absolute;
    right: 5px;
    top: 5px;
    z-index:-1;
  }

更改了 .country-selector .options 边距并取消了 .country-selector padding-right。

然后将 .country-selector:before 更改为 -1 的 z-index。

不确定这是否适用于所有浏览器/设备，但似乎适用于 FF 和 chrome (OS x)。

希望这会有所帮助:)

Answer 5

存在验证错误，使其无法正常工作：

元素标签不得作为标签元素的后代出现。

如果您放置跨度而不是内部标签，则一切正常。 您在父标签内也有多个输入字段，但这需要更大的修复，因为您需要使用它触发 country-selector 复选框。

Working pen.