Custom Select dropdown

custom-select-dropdown.markdown

Custom Select dropdown

Pure CSS custom dropdown menu.

A Pen by Sverrir Sigmundarson on CodePen.

License.

index.html

<h2>Making HTML dropdowns not suck</h2>

<span class="color-picker"></span>

<br/><br/>

<span class="custom-dropdown big">
    <select>    
        <option>Sherlock Holmes</option>
        <option>The Great Gatsby</option>  
        <option>V for Vendetta</option>
        <option>The Wolf of Wallstreet</option>
        <option>Quantum of Solace</option>
    </select>
</span>

<span class="custom-dropdown">
    <select>
        <option>Sherlock Holmes</option>
        <option>The Great Gatsby</option>  
        <option>V for Vendetta</option>
        <option>The Wolf of Wallstreet</option>
        <option>Quantum of Solace</option>
    </select>
</span>

<span class="custom-dropdown small">
    <select>
        <option>Sherlock Holmes</option>
        <option>The Great Gatsby</option>  
        <option>V for Vendetta</option>
        <option>The Wolf of Wallstreet</option>
        <option>Quantum of Solace</option>
    </select>
</span>

<br/>

<span class="custom-dropdown big">
    <select disabled>
        <option>Sherlock Holmes</option>
        <option>The Great Gatsby</option>  
        <option>V for Vendetta</option>
        <option>The Wolf of Wallstreet</option>
        <option>Quantum of Solace</option>
    </select>
</span>

<span class="custom-dropdown">
    <select disabled>
        <option>Sherlock Holmes</option>
        <option>The Great Gatsby</option>  
        <option>V for Vendetta</option>
        <option>The Wolf of Wallstreet</option>
        <option>Quantum of Solace</option>
    </select>
</span>

<span class="custom-dropdown small">
    <select disabled>
        <option>Sherlock Holmes</option>
        <option>The Great Gatsby</option>  
        <option>V for Vendetta</option>
        <option>The Wolf of Wallstreet</option>
        <option>Quantum of Solace</option>
    </select>
</span>

script.js

/* JS for demo only */
var colors = ['1abc9c', '2c3e50', '2980b9', '7f8c8d', 'f1c40f', 'd35400', '27ae60'];

colors.each(function (color) {
  $$('.color-picker')[0].insert(
    '<div class="square" style="background: #' + color + '"></div>'
  );
});

$$('.color-picker')[0].on('click', '.square', function(event, square) {
  background = square.getStyle('background');
  $$('.custom-dropdown select').each(function (dropdown) {
    dropdown.setStyle({'background' : background});
  });
});

/*
 * Original version at
 * http://red-team-design.com/making-html-dropdowns-not-suck
 */ 

scripts

<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1/prototype.js"></script>

style.css

/* CodePen demo */
body {
  background: #2a2a2b;
  color: #fff;
  text-align: center;
  font-family: Arial, Helvetica;
}

.big {
  font-size: 1.2em;
}

.small {
  font-size: .7em;
}

.square {
  width: .7em;
  height: .7em;
  margin: .5em;
  display: inline-block;
}

/* Custom dropdown */
.custom-dropdown {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 10px; /* demo only */
}

.custom-dropdown select {
  background-color: #1abc9c;
  color: #fff;
  font-size: inherit;
  padding: .5em;
  padding-right: 2.5em;	
  border: 0;
  margin: 0;
  border-radius: 3px;
  text-indent: 0.01px;
  text-overflow: '';
  /*Hiding the select arrow for firefox*/
  -moz-appearance: none;
  /*Hiding the select arrow for chrome*/
  -webkit-appearance:none;
  /*Hiding the select arrow default implementation*/
  appearance: none;
}
/*Hiding the select arrow for IE10*/
.custom-dropdown select::-ms-expand {
    display: none;
}

.custom-dropdown::before,
.custom-dropdown::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.custom-dropdown::after { /*  Custom dropdown arrow */
  content: "\25BC";
  height: 1em;
  font-size: .625em;
  line-height: 1;
  right: 1.2em;
  top: 50%;
  margin-top: -.5em;
}

.custom-dropdown::before { /*  Custom dropdown arrow cover */
  width: 2em;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 0 3px 3px 0;
  background-color: rgba(0,0,0,.2);
}

.custom-dropdown::after {
  color: rgba(0,0,0,.6);
}

.custom-dropdown select[disabled] {
  color: rgba(0,0,0,.25);
}