Skip to content

Instantly share code, notes, and snippets.

@jeremyworboys
Created June 18, 2012 10:35
Show Gist options
  • Select an option

  • Save jeremyworboys/2947799 to your computer and use it in GitHub Desktop.

Select an option

Save jeremyworboys/2947799 to your computer and use it in GitHub Desktop.
jQuery: Custom styled select drop-downs
/**
* Style Drop Downs
--------------------------------------------------------------------------*/
(function() {
var $selects = $("select");
if ($selects.length > 0) {
$selects.each(function(i) {
var $select = $(this),
$styled = $("<div />");
$select
.data("styled", $styled)
.after(
$styled
.addClass("select")
.addClass($select[0].className)
.text($select.find(":selected").text())
.css({
marginBottom: $select.css("marginBottom"),
marginTop: (0 - $select.outerHeight())
})
)
.css({
marginBottom: 0,
position: "relative",
opacity: 0
})
.on({
change: function(e) {
var $target = $(e.target);
$target
.data("styled")
.text($target.find(":selected").text());
},
mouseenter: function(e) {
$(e.target).data("styled").addClass("hover");
},
mouseleave: function(e) {
$(e.target).data("styled").removeClass("hover");
},
focus: function(e) {
$(e.target).data("styled").addClass("focus");
},
blur: function(e) {
$(e.target).data("styled").removeClass("focus");
}
});
});
}
})();// End of style drop downs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment