Radio select emulation - no collapse

Uses radio inputs to emulate a select element. Allows custom styling of the options that you can't do with select options.

by Laura

HTML

<div class="radio_select">
  <div>
    <input id="rad1" type="radio" name="radio_select" />
    <label for="rad1">Option 1</label>
  </div>

  <div>
    <input id="rad2" type="radio" name="radio_select" checked="checked" />
    <label for="rad2">Option 2</label>
  </div>
  
  <div>
    <input id="rad3" type="radio" name="radio_select" />
    <label for="rad3">Option 3</label>
  </div>
</div>

CSS

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + label {
  background-color: black;
  color: #28AADC;
}

/* none functional styles.  just regular styling */
.radio_select {
  background-color: #28AADC;
  display: inline-block;
}