将下拉选项添加到纯 CSS 内容过滤器

Question

我正在尝试向这个纯 CSS 过滤器添加一个下拉选项，它执行与单击单选按钮相同的操作，如原始代码笔中所示：http://codepen.io/allienworks/pen/vOGMzV

此下拉菜单将用于移动设备，而单选按钮将用于中等+。

我尝试了几个不同的选项来实现这一点，包括基本上尝试所有相关的选择器，添加

select[name="dropdown"] option[value="red"]

代码，重新排列，去掉单选按钮，还有一些其他的，但似乎没有任何变化。你可以在这里看到我的成果，这似乎应该有效：http://codepen.io/budgetdumpster/pen/rVQbLV

所以我想我的问题是是否有办法在纯 css 中使用此选项？我不害怕使用 JS 或 Jquery 作为最后的手段，但想保持纯粹的 css 主题。

谢谢！

Answer 1

你所拥有的本质上是按钮，这些按钮正在验证为其设置的值。对于下拉菜单，您可以这样做，但输入会设置值。所以保留输入 select 但添加一个按钮，将值传递给红色或蓝色或绿色。

或者你可以使用类似的东西：

<input type="text" value="somevalue" onBlur="return validate();">

onBlur 你必须使用 JavaScript 构建一个验证函数，它将传递值的信息。

这是一种方法。其他人可能会想出比我的想法更简单的东西 :P

Answer 2

对纯 CSS 是的。只需将 label 放入容器中，然后按照您喜欢的方式设置它们的样式。您可以使用媒体查询将容器样式设置为适用于较小设备的下拉列表。 This article by Scott O'Hara 非常擅长展示如何使用这种 CSS 诡计。

body{
  margin:0;
  text-align:center;
  font-family: Verdana;
  background:#f5f5f5;
}
h1 {
  text-align:center;
}
.container {
  width:90%;
  margin:0 auto;
}
input[type="radio"] {
    display:none;
}
#blue:checked + label {
  background:#6666ff;
}
#blue:checked ~ .tile:not(.blue) {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}
#red:checked + label {
  background:#ff4466;
}
#red:checked ~ .tile:not(.red) {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}
#green:checked + label {
  background:#66dd99;
}
#green:checked ~ .tile:not(.green) {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

.tile {
  width:23%;
  height:100px;
  float:left;
  transition:all 1s;
  margin:0.5%;
  padding:0.5%;
}
.green {
  background:#66dd99;
}
.blue {
  background:#6666ff;
}
.red {
  background:#ff4466;
}

.dropdown {
  background-color: #FFF;
}

.dropdown label {
    display: block;
    text-align: left;
}

.dropdown label:not(.default) {
    display: none;
}

.dropdown:hover .default,
.dropdown:focus .default {
    color: lightgray;
}

.dropdown:hover label:not(.default),
.dropdown:focus label:not(.default)
 {
    display: block;
}

<h1>FILTER BY COLOR</h1>
<div class="container"> 
  <input type="radio" id="blue" name="color" />
  <input type="radio" id="red" name="color"/>
  <input type="radio" id="green" name="color"/>
  <input type="radio" id="reset" name="color"/>
  <div class="dropdown">
  <label class="default">Select your option</label>
  <label for="green">GREEN</label>
  <label for="red">RED</label>
  <label for="blue">BLUE</label>
  <label for="reset">RESET</label>
    </div>

  <div class="tile blue">1</div>
  <div class="tile red">2</div>
  <div class="tile blue">3</div>
  <div class="tile green">4</div>
  <div class="tile blue">5</div>
  <div class="tile red">6</div>
  <div class="tile red">7</div>
  <div class="tile green">8</div>
  <div class="tile blue">9</div>
  <div class="tile green">10</div>
  <div class="tile red">11</div>
  <div class="tile green">12</div>
  <div class="tile blue">13</div>
  <div class="tile blue">14</div>
  <div class="tile green">15</div>
  <div class="tile red">16</div>
</div>

将下拉选项添加到纯 CSS 内容过滤器

Adding Dropdown Option to a Pure CSS Content Filter

html

css

dropdownbox