html - 向纯 CSS 内容过滤器添加下拉选项

Question

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

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

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

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

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

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

谢谢!

Answer 1

是的纯 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>