Skip to content

Instantly share code, notes, and snippets.

@sethlouey

sethlouey/Custom dropdown select

Created October 5, 2012 18:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sethlouey/3841395 to your computer and use it in GitHub Desktop.
Save sethlouey/3841395 to your computer and use it in GitHub Desktop.
Download ZIP
Custom dropdown select
Raw
Custom dropdown select
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
</head>
<body>
<div class="container">
<section class="main">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Sort by</span>
<ul class="dropdown">
<li><a href="#">Best</a></li>
<li><a href="#">Newest</a></li>
</ul>
</div>
</section>
</div>
<!-- jQuery if needed -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-3').removeClass('active');
});
});
</script>
</body>
</html>
.wrapper-dropdown-3:focus .dropdown {
opacity: 1;
pointer-events: auto;
}
/* GLOBALS */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
::selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
.wrapper-dropdown-3 {
/* Size and position */
position: relative;
width: 100px;
margin: 0 auto;
padding: 5px 10px;
/* Styles */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FCF0D1), to(#eadcb8));
background: -webkit-linear-gradient(top, #FCF0D1, #eadcb8);
background: -moz-linear-gradient(top, #FCF0D1, #eadcb8);
background: -ms-linear-gradient(top, #FCF0D1, #eadcb8);
background-color: #FCF0D1;
border-radius: 3px;
border: 1px solid rgba(240,221,177,0.15);
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
cursor: pointer;
outline: none;
-moz-box-shadow: inset 0 0 10px #fbf3dd;
-webkit-box-shadow: inset 0 0 10px #fbf3dd;
box-shadow: inset 0 0 10px #fbf3dd;
/* Font settings */
font-weight: normal;
color: #a2a2a2;
text-transform: uppercase;
font-family: 'Helvetica Neue';
font-size: 12px;
}
.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 15px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #a2a2a2 transparent;
}
.wrapper-dropdown-3 .dropdown {
/* Size & position */
position: absolute;
top: 140%;
left: 0;
right: 0;
/* Styles */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FCF0D1), to(#eadcb8));
background: -webkit-linear-gradient(top, #FCF0D1, #eadcb8);
background: -moz-linear-gradient(top, #FCF0D1, #eadcb8);
background: -ms-linear-gradient(top, #FCF0D1, #eadcb8);
background-color: #FCF0D1;
border-radius: 3px;
border: 1px solid rgba(240,221,177,0.15);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
font-weight: normal;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
list-style: none;
/* Hiding */
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-3 .dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 15px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #FCF0D1 transparent;
}
.wrapper-dropdown-3 .dropdown:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0,0,0,0.1) transparent;
}
.wrapper-dropdown-3 .dropdown li a {
display: block;
padding: 10px;
text-decoration: none;
color: #8aa8bd;
border-bottom: 1px solid #d7ccae;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown li i {
float: right;
color: inherit;
}
.wrapper-dropdown-3 .dropdown li:first-of-type a {
border-radius: 7px 7px 0 0;
}
.wrapper-dropdown-3 .dropdown li:last-of-type a {
border: none;
border-radius: 0 0 7px 7px;
}
/* Hover state */
.wrapper-dropdown-3 .dropdown li:hover a {
background: #eee3b9;
}
/* Active state */
.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}
/* No CSS3 support */
.no-opacity .wrapper-dropdown-3 .dropdown,
.no-pointerevents .wrapper-dropdown-3 .dropdown {
display: none;
opacity: 1; /* If opacity support but no pointer-events support */
pointer-events: auto; /* If pointer-events support but no pointer-events support */
}
.no-opacity .wrapper-dropdown-3.active .dropdown,
.no-pointerevents .wrapper-dropdown-3.active .dropdown {
display: block;
}
/* No CSS3 support: none */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment