<div class="container">
  
<h1>Faking dropdown selects with radios</h1>
<div class="fake-select">
  <label for="ext" class="external-label">
    <input type="checkbox" class="external" id="ext"/>
    
    <div class="internal">

          <input type="radio" name="internal-radios" id="in-1" checked /><label class="fontawesome-download-alt"  for="in-1">Option 1</label>
          <input type="radio" name="internal-radios" id="in-2" /><label class="fontawesome-download-alt" for="in-2">Option 2</label>
          <input type="radio" name="internal-radios" id="in-3" /><label class="fontawesome-download-alt" for="in-3">Option 3</label>
      <input type="radio" name="internal-radios" id="in-4" /><label class="fontawesome-download-alt" for="in-4">Option 4</label>
      <input type="radio" name="internal-radios" id="in-5" /><label class="fontawesome-download-alt" for="in-5">Option 5</label>
      <input type="radio" name="internal-radios" id="in-6" /><label class="fontawesome-download-alt" for="in-6">Option 6</label>
      <input type="radio" name="internal-radios" id="in-7" /><label class="fontawesome-download-alt" for="in-7">Option 7</label>
      <input type="radio" name="internal-radios" id="in-8" /><label class="fontawesome-download-alt" for="in-8">Option 8</label>
      <input type="radio" name="internal-radios" id="in-9" /><label class="fontawesome-download-alt" for="in-9">Option 9</label>
      <input type="radio" name="internal-radios" id="in-10" /><label class="fontawesome-download-alt" for="in-10">Option 10</label>

    </div>
  </label>
</div>

<p>
  This allows to style the select boxes with more consistency across browsers. It all works without Javascript. I couldn't figure out how to avoid the fact that you have to click twice on an item to actually select it. You could add a little bit of js to close the select when the user clicks outside of it (users without js will just have to double click an item)
</p>

  <h3>What do you want to eat?</h3>
<div class="fake-select">
  <label for="ext-2" class="external-label">
    <input type="checkbox" class="external" id="ext-2"/>
    
    <div class="internal">

          <input type="radio" name="internal-radios2" id="in2-1" checked /><label class="fontawesome-download-alt"  for="in2-1">Fish</label>
          <input type="radio" name="internal-radios2" id="in2-2" /><label class="fontawesome-download-alt" for="in2-2">Meat</label>
          <input type="radio" name="internal-radios2" id="in2-3" /><label class="fontawesome-download-alt" for="in2-3">Salad</label>
      <input type="radio" name="internal-radios2" id="in2-4" /><label class="fontawesome-download-alt" for="in2-4">My enemies</label>
      <input type="radio" name="internal-radios2" id="in2-5" /><label class="fontawesome-download-alt" for="in2-5">Water</label>
      <input type="radio" name="internal-radios2" id="in2-6" /><label class="fontawesome-download-alt" for="in2-6">Vegetables</label>
      <input type="radio" name="internal-radios2" id="in2-7" /><label class="fontawesome-download-alt" for="in2-7">Santa claus</label>
      <input type="radio" name="internal-radios2" id="in2-8" /><label class="fontawesome-download-alt" for="in2-8">Moot</label>

    </div>
  </label>
</div>
</div>

@import "compass/css3";

/* set up icon font*/

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
}


/*************************************************************/
/* THIS FIRST PART IS THE FUNCTIONAL ONE / SHOW - HIDE STUFF */
/*************************************************************/

.fake-select {
  cursor: pointer !important;
  input[type="radio"] {
    position: absolute;
    top: -10000px;
  }
  label {
    //display: block;
    
  }
  //hide the not checked items
  .internal {
    //display: none; 
    input {
      display: none;
      &+label {
        display: none;
      }
    }
  }
  
  //show the checked item
  .external {
    position: absolute;
    top: -10000px;
    &+.internal {
      input:checked {
        display: block;
        &+label {
          display: block;
          pointer-events: none;
        }
      }
    }
  }

  //when external is checked show all options
  .external:checked {
    &+.internal {
      input {
        display: block;
      
        &+label {
          display: block;
        
          &:before {
            content: "\F096";
            display: block !important;
            position: absolute;
            left: 9px;
          }
        }
      }
    }
  }
}


/*************************************************************/
/*            THIS HANDLES THE ACTUAL AESTHETICS             */
/*************************************************************/

.fake-select {
  background-color: #333;
  width: 300px;
  position: relative;
  cursor: pointer;
  @include border-radius(3px);
  //@include box-shadow(inset 0 0 10px 0 rgba(0,0,0,1));
  
  &:hover {
    cursor: pointer;
    @include box-shadow( 0 0 5px 0 rgba(0,0,0,.5));
  }
  
  &:after {
    content: "v";
    display: block;
    position: absolute;
    width: 35px;
    top: 2px;
    right: 2px;
    background-color: yellowgreen;
    text-align: center;
    line-height: 44px;
    color: white;
    pointer-events: none;
    @include border-radius(1px);
  }
 .internal {
  
    label {

      padding: 14px 10px 14px 30px;
      position: relative;
      border-top: 1px solid rgba(255, 255, 255, .3);
      border-bottom: 1px solid black;
      @include transition;
      @include transition-duration(250ms);
    
      &:hover {
        background-color: rgba(255,255,255, .1);
      }
    }

    input:checked {
      &+label {
          color: #BADA55;
        &:before {
          content: "\f14a" !important;
          display: block !important;
          position: absolute;
          left: 9px;
        }
      }
    }
  }

  .external:checked {
    &+.internal {
    
       input:checked {
         &+label {
         &:after {
           content:" // click again \A to confirm";
           font-size: 12px;
            color: white;
        }
      }
     }
    }
  }
}

/**** STUFF THAT DOESN'T HAVE TO DO WITH THE DROPDOWNS ****/
body {
  font-family: Helvetica Neue, Helvetica, Arial, Verdana;
  font-weight: 100;
  color: white;
  background-color: black;
}
.container {
  width: 300px;
  margin: 0 auto;
  
  h1, h3 {
    font-weight: inherit;
    text-align: center;
  }
}

/* NO JS :) */