Pure CSS custom dropdown menu.
Created
March 4, 2014 15:30
-
-
Save anonymous/9348587 to your computer and use it in GitHub Desktop.
A Pen by Serguei.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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 | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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: ''; | |
-webkit-appearance: button; /* hide default arrow in chrome OSX */ | |
} | |
.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; | |
} | |
.custom-dropdown select[disabled] { | |
color: rgba(0,0,0,.3); | |
} | |
.custom-dropdown select[disabled]::after { | |
color: rgba(0,0,0,.1); | |
} | |
.custom-dropdown::before { | |
background-color: rgba(0,0,0,.15); | |
} | |
.custom-dropdown::after { | |
color: rgba(0,0,0,.4); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment