Adding Dropdown Option to a Pure CSS Content Filter

Question

I'm trying to add a dropdown option to this pure CSS filter that does the same action as clicking the radio buttons as seen here in the original codepen: http://codepen.io/allienworks/pen/vOGMzV

This dropdown would be used for mobile, while the radio buttons would be for medium+.

I've tried a few different options to get this going, including trying basically all related selectors, adding

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

to the code, rearranging, getting rid of the radio buttons, and a few others but nothing seems to budge. You can see what I landed with, which seems like it should work, here: http://codepen.io/budgetdumpster/pen/rVQbLV

So I guess my question is if there is a way to have this option in pure css? I'm not afraid of using JS or Jquery as a last resort but wanted to keep with the pure css theme.

Thanks!

Answer 1

Yes to pure CSS. Just put the labels in a container and proceed to style them the way you would like. You can use media queries to style the container into a dropdown for smaller devices. This article by Scott O'Hara is excellent at showing how to use this CSS trickery.

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>