Codepen Example

Question

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

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

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

我只剩下一个问题，一旦展开，点击关闭菜单就无法正常工作。单击某个项目时，正常的选择框将关闭。直到你在选择框的边框附近点击，我才会这样做。

Closed CSSelectbox

Open CSSelectoox

这是因为用户点击内部输入时不会切换父标签的: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的方法，它看起来有点蹩脚atm，我会在另一天重构它：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中工作，因为：活动不会冒泡，我可以打开任何建议！

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： 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：之前更改为z-index为-1。

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

希望这会有所帮助：）

Answer 5

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

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

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

Working pen.

只需点击一下，是否可以切换两个CSS`：checked`伪类？

5 个答案:

Codepen Example