Question

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

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

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

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

到代码，重新排列，摆脱单选按钮，以及其他一些但似乎没有任何让步。你可以在这里看到我登陆的内容，这似乎应该有效：http://codepen.io/budgetdumpster/pen/rVQbLV

所以我想我的问题是，如果有一种方法可以在纯CSS中使用此选项吗？我不怕使用JS或Jquery作为最后的手段，但想要保持纯css主题。

谢谢！

Answer 1

你有什么基本上是按钮来验证设置它们的值。对于下拉菜单，您可以执行此操作，但输入会设置值。因此，请保持输入选择，但添加一个将值传递给红色或蓝色或绿色的按钮。

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

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

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

这是一种方法。其他人可能会想出一些比我的想法更少的东西：P

Answer 2

是纯CSS。只需将label放入容器中，然后按照您希望的方式设置样式。您可以使用媒体查询将容器的样式设置为较小设备的下拉列表。 This article by Scott O'Hara非常善于展示如何使用这种CSS技巧。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: