<div class="column-6 form-select">
  <select name="" id="">
    <option value="" disabled="disabled" selected="selected">Choose a character</option>
    <option>Bender</option>
    <option>Jerry Seinfeld</option>
    <option>Zoidberg</option>
    <option>Kramer</option>
    <option>Hapskidoodle</option>
    <option>Doodleski</option>
  </select>
</div>
@import "compass/css3";

.form-select {
    @include user-select(none);

    background: #ffffff;
    overflow: hidden;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 10px rgba(0, 0, 0, 0.07);

    @include single-transition(box-shadow, 0.2s);

    &:focus,
    &:hover {
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    }

    &:after {
        content: '▾';
        position: absolute;
        top: 0;
        right: 12px;
        z-index: 1;
        color: #bbbbbb;
        line-height: 40px;
        font-size: 14px;

        .ie & {
            display: none;
        }
    }
}

select {
    position: relative;
    background: transparent;
    background-image: none;
    display: block;
    width: 100%;
    outline: none;
    color: #888888;
    cursor: pointer;
    z-index: 2;
    border: none;
    padding: 10px 10px 10px 5px;
    // This is so hacky.. (for Firefox)
    // Removes the default select arrow.
    text-overflow: '';
    text-indent: 5px;
    // End of brutal hack

    @include appearance(none);

    &[multiple=multiple] {
        height: auto;
        border: 1px solid #cbcbcb;
        border-radius: 3px;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 10px rgba(0, 0, 0, 0.07);

        @include single-transition(box-shadow, 0.2s);

        &:hover {
            border-color: #cccccc;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        }
    }

    option[disabled] {
        color: #eeeeee;
        text-shadow: none;
        border: none;
    }
}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #888888;
}

select::-ms-expand {
    display: none;
}



/*==========  Generic styling  ==========*/

.column-6 {
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -20px 0 0 -150px;
   width: 300px;
}
View Compiled
/* 
  
  I use a custom icon font for the arrow normally
  instead of a UTF-8 character.
  Check fontello.com for example.

  ------------------------------------------------

  SUPPORT:
  
  - IE8+ (IE8-IE9 have default select arrow)
  - All latest browsers

*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.