Pretty Select dropdown

index.html

<span class="dropdown-el">
    <input type="radio" name="sortType" value="Relevance" checked="checked" id="sort-relevance"><label for="sort-relevance">Relevance</label>
    <input type="radio" name="sortType" value="Popularity" id="sort-best"><label for="sort-best">Product Popularity</label>
    <input type="radio" name="sortType" value="PriceIncreasing" id="sort-low"><label for="sort-low">Price Low to High</label>
    <input type="radio" name="sortType" value="PriceDecreasing" id="sort-high"><label for="sort-high">Price High to Low</label>
    <input type="radio" name="sortType" value="ProductBrand" id="sort-brand"><label for="sort-brand">Product Brand</label>
    <input type="radio" name="sortType" value="ProductName" id="sort-name"><label for="sort-name">Product Name</label>
  </span>

pretty-select-dropdown.markdown

Pretty Select dropdown

This still uses inputs to maintain the form submission variables, while relying primarily on css.

A Pen by 王树贤 on CodePen.

License.

script.js

$('.dropdown-el').click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).toggleClass('expanded');
  $('#'+$(e.target).attr('for')).prop('checked',true);
});
$(document).click(function() {
  $('.dropdown-el').removeClass('expanded');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

$color:#3694d7;
$timing:.3s;

body {
  text-align:center;
  background:mix($color,#fff,10%);
  min-height:95vh;
  margin:0;
  padding:0;
  border-bottom: 5vh solid $color;
  font-family: "Myriad Pro","Arial",sans;
  font-size:24px;
}
.dropdown-el {
  margin-top:20vh;
    
  min-width: 12em;
  position: relative;
  display: inline-block;
  margin-right: 1em;
  min-height: 2em;
  max-height:2em;
  overflow:hidden;
  top: .5em;  
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  color: #444;
  
  outline: none;
  border: .06em solid transparent;
  border-radius: 1em;
  background-color: mix($color,#fff,25%);
  
  transition: $timing all ease-in-out;
  input:focus + label {
    background: #def;
  }
  input {
    width: 1px;
    height: 1px;
    display: inline-block;
    position: absolute;
    opacity: 0.01;
  }
  label {
    border-top: .06em solid #d9d9d9;
    display:block;
    height: 2em;
    line-height: 2em;
    padding-left: 1em;
    padding-right: 3em;
    cursor: pointer;
    position: relative;
    transition: $timing color ease-in-out;  
    &:nth-child(2) {
      margin-top: 2em;
      border-top: .06em solid #d9d9d9;
    }
  }
  input:checked + label {
    display:block;
    border-top: none;
    position: absolute;
    top: 0;
    width: 100%;

    &:nth-child(2) {
      margin-top: 0;
      position: relative;
    }
  }
  
  &::after {
    content:"";
    position: absolute;
    right: 0.8em;
    top: 0.9em;
    border: .3em solid $color;
    border-color: $color transparent transparent transparent;
    transition: .4s all ease-in-out;
  }
  &.expanded {
    border: .06em solid $color;
    background: #fff;
    border-radius: .25em;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
    max-height:15em;
    
    label {
      border-top: .06em solid #d9d9d9;
      &:hover {
        color:$color;
      }
    }
    input:checked + label {
      color:$color;
    }
    
    &::after {
      transform: rotate(-180deg);
      top:.55em;
    }
  }
}