<form class="has-js">
  <ul>    
    <li>
      <input type="checkbox" id="checkbox1" checked>
      <label for="checkbox1">Checkbox</label>
    </li>
    
    <li>
      <input type="radio" id="radio1" name="radiogroup" checked />
      <label for="radio1">Radio 1</label>
    </li>
    
    <li>
      <input type="radio" id="radio2" name="radiogroup" />
      <label for="radio2">Radio 2</label>
    </li>
    
    <li>
      <div class="select">
        <select>
          <option class="placeholder">- choose an option -</option>
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </select>
      </div>
    </li>
  </ul>
</form>
@import "compass/css3";

@import "compass/css3/user-interface";

$color-form-input-text: #141414;
$color-form-input-text-hover: #141414;
$color-form-input-text-focus: #141414;
$color-form-input-placeholder: #999;

$color-form-input-bg: #f3f3f3;
$color-form-input-bg-hover: #f3f3f3;
$color-form-input-bg-focus: #f3f3f3;

$color-form-input-border: #141414;
$color-form-input-border-hover: #141414;
$color-form-input-border-focus: #141414;
$width-form-input-border: 1px;
$style-form-input-border: solid;

$color-form-dropdown-text: #141414;
$color-form-dropdown-text-hover: #999;
$color-form-dropdown-bg: #f3f3f3;
$color-form-dropdown-bg-hover: #f3f3f3;
  
.select {
    span {
        display: none;
    }
}

.has-js .select {
    span,
    select,
    ul,
    li {
        margin: 0;
        padding: 0;
    }

    @include user-select(none);
    @include transition-duration(0.1s);

    display: inline-block;
    cursor: pointer;
    border: $width-form-input-border $style-form-input-border $color-form-input-border;
    background-color: $color-form-input-bg;

    &:after {
        @include transition-duration(0.15s);
        @include rotate(-90deg);

        content: "‹";
        position: absolute;
        top: 20px;
        right: 15px;
        line-height: 0;
        font-size: 30px;
        color: $color-form-input-text;
    }

    &:hover {
        border-color: $color-form-input-border-hover;
        background-color: $color-form-input-bg-hover;

        &:after,
        span {
            color: $color-form-input-text-hover;
        }
    }

    &.has-focus {
        border-color: $color-form-input-border-focus;
        background-color: $color-form-input-bg-focus;

        &:after {
            @include rotate(90deg);
        }

        &:after,
        span {
            color: $color-form-input-text-focus;
        }
    }

    span {
        @include transition;
        
        display: inline-block;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0 30px 0 15px;
        line-height: 43px;
        color: $color-form-input-text;
    }

    &.is-placeholder span {
        color: $color-form-input-placeholder;
        text-transform: uppercase;
    }

    select {
        opacity: 0;
        float: left;
        height: 41px;
        padding: 0 30px 0 15px;
        border: 0 none;
        -webkit-appearance: none;

        &,
        x:-moz-any-link {
            padding-right: 5px;
        }
    }

    ul {
        display: none;
        position: absolute;
        z-index: 100;
        top: 100%;
        left: -$width-form-input-border;
        right: -$width-form-input-border;
        padding: 11px 0 8px 0;
        border: $width-form-input-border $style-form-input-border $color-form-input-border;
        box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        background-color: $color-form-dropdown-bg;
    }

    li {
        @include transition;

        padding: 0 15px;
        line-height: 30px;
        list-style-type: none;
        color: $color-form-dropdown-text;
        background-color: $color-form-dropdown-bg;

        &:hover,
        &:focus {
            cursor: pointer;
            color: $color-form-dropdown-text-hover;
            background-color: $color-form-dropdown-bg-hover;
        }

        &.is-placeholder {
            color: $color-form-input-placeholder;
            text-transform: uppercase;
        }
    }
}




form:not(#ie8) {
  
  input[type="radio"],
  input[type="checkbox"] {
    //display: none;//don't work with :focus
    position: absolute;
    opacity: 0;

    + label {
      display: inline-block;
      padding-left: 26px;
      line-height: 1.4em;
    }
  
    + label:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 18px;
      height: 18px;
      background-color: white;
      border: 1px solid lightgrey;
      
      @include transition-property(border-color);
      @include transition-duration(0.2s);
      @include box-shadow(rgba(0,0,0,0.2) 2px 2px 4px inset);
    }
    
    &:focus + label:before {
      border-color: black;
    }
    
    + label:after {
      position: absolute;
      
      @include transition-property(color);
      @include transition-property(background-color);
      @include transition-duration(0.2s);
    }
  }
  
  input[type="checkbox"] {
    + label:before {
      border-radius: 3px;
    }
    
    &:checked + label:after {
      content: "✓";
      top: 11px;
      left: 3px;
      font-size: 16px;
      font-weight: bold;
      line-height: 0;
      color: grey;
      
      @include text-shadow(rgba(0,0,0,0.2) 1px 1px 0);
    }
    
    &:checked:focus + label:after {
      color: black;
    }
  }
  
  input[type="radio"] {
    + label:before {
      border-radius: 9px;
    }
    
    &:checked + label:after {
      content: "";
      top: 5px;
      left: 5px;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background-color: grey;
      
      @include box-shadow(rgba(0,0,0,0.4) 1px 1px 0 inset);
    }
    
    &:checked:focus + label:after {
      background-color: black;
    }
  }
  
}



* {
  position: relative;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 20px 100px;
  font: 14px/1.4em Arial;
}

form {  
  ul {
    margin: 0;
    padding: 0;
  }
  
  li {
    margin: 10px 0 0 0;
    line-height: 32px;
    list-style-type: none;
    
    &:first-child {
      margin: 0;
    }
  }
  
  label {
    cursor: pointer;
  }
}
View Compiled
var niceSelect = function() {

    var is_touchDevice = ('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0),
        styledDropdown = true,
        selectbox;

    // auf iOS 4 & 5 funktioniert das styledDropdown nicht
    //if( this.is_iOS4 || this.is_iOS5 ) return;
    if( is_touchDevice ) styledDropdown = false;

    var openSelect = function(selectbox) {
        // andere schließen
        closeSelect( $('.select.has-focus') );

        // öffnen
        selectbox.addClass('has-focus').children('ul').slideDown(100);
        $(document).on('click', function () {
            closeSelect(selectbox);
        });
    };

    var closeSelect = function(selectbox) {
        selectbox.removeClass('has-focus').children('ul').slideUp(100);
        $(document).off('click', closeSelect);
    };

    var buildDropDown = function(select, selectbox) {
        select
            .css('visibility', 'hidden')
            .after('<ul></ul>');

        $('option', select).each(
            function() {
                var option = $(this);

                $('<li></li>')
                    .addClass(option.attr('class'))
                    .text(option.text())
                    .appendTo($('ul', selectbox));
            }
        );

        $('li', select.closest('div'))
            .off( 'click' )
            .on( 'click',
                function() {
                    select.get(0).selectedIndex = $(this).index();
                    select.trigger('change');
                }
            );
    };


    $('select').each(
        function() {
            var select = $(this),
                selectBox = select.parent('div'),
                selectLabel = select.siblings('span'),
                selectSelected = select.children('option:selected');

            if( !selectBox.hasClass('select') ) {
                select.wrap('<div class="select"/>');
                selectBox = select.closest('div');
            }

            if( !selectLabel.length ) {
                select
                    .before('<span></span>')
                    .siblings('span').text(selectSelected.text());
            }

            if(selectSelected.hasClass('is-placeholder')) selectBox.addClass('is-placeholder');
            else selectBox.removeClass('is-placeholder');

            // wenn auch das Dropdown gestylt werden soll => DropDown erzeugen
            if( styledDropdown ) buildDropDown(select, selectBox);
        }
    )
    .off( 'change focus blur' )
    .on( 'change',
        function() {
            var selectSelected = $(':selected', this),
                selectBox = selectSelected.closest('div');

            if (selectSelected.hasClass('is-placeholder')) selectBox.addClass('is-placeholder');
            else selectBox.removeClass('is-placeholder');

            $(this).siblings('span').text(selectSelected.text());
        }
    )
    .on( 'focus',
        function() {
            $(this).parent().addClass('has-focus');
        }
    )
    .on( 'blur',
        function() {
            $(this).parent().removeClass('has-focus');
        }
    );


    // wenn auch das Dropdown gestylt werden soll

    if( styledDropdown ) {

        $('.select')
            .off( 'click' )
            .on( 'click',
                function(e) {
                    e.stopPropagation();

                    var selectBox = $(this);

                    if (selectBox.hasClass('has-focus')) closeSelect(selectBox);
                    else openSelect(selectBox);
                }
            );
    }

};

niceSelect();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js