Skip to content

Instantly share code, notes, and snippets.

@beshur
Last active December 15, 2015 19:18
Show Gist options
  • Save beshur/5309890 to your computer and use it in GitHub Desktop.
Save beshur/5309890 to your computer and use it in GitHub Desktop.
jQuery styled select js
.b_select {
position: relative;
display: block;
margin-top: 1px;
margin-right: 29px;
padding: 0;
color: #000;
font-size: 12px;
text-decoration: none;
}
.b_select.d_i_b {
display: inline-block;
vertical-align: top;
}
.b_select:hover {
}
.b_select .ul li:active {
bottom: -1px;
}
.b_select .selected {
/*position: relative;*/
display: inline-block;
cursor: pointer;
}
.b_select .selected span {
margin-right: 2px;
border-bottom: 1px dashed #000;
}
.b_select .selected span:hover { border-bottom-color: transparent; }
.b_select .selected > i {
position: absolute;
top: 0;
right: -29px;
z-index: 11;
display: block;
width: 28px;
height: 100%;
margin: 0 0 0 0;
text-align: center;
line-height: 18px;
}
.b_select .selected > i > b {
display: inline-block;
width: 6px;
height: 4px;
vertical-align: middle;
background: url(../images/spr.png) -44px -92px
}
.b_select.m_open .selected > i > b { background-position: -44px -96px; }
.b_select .list_div {
display: none;
position: absolute;
top: 25px;
right: -20px;
z-index: 15;
width: 100%;
min-width: 200px;
}
.b_select .list {
padding-left: 0;
margin: 0;
max-height: 180px;
}
.b_selected,
.b_select .list li {
font-size: 11px;
line-height: 12px;
padding: 7px 10px;
display: block;
float: none;
cursor: pointer;
}
.b_select .list li {
padding: 7px 0 7px 10px;
text-align: left;
}
.b_select .list .active { display: none;}
.b_select .list li:hover { background: #ccc; }
.b_select .list li a {
color: inherit;
text-decoration: none;
}
// Custom select script
//
// Alex Buznik (@beshur)
// \\
function selectize(obj) {
if (!obj) return;
$(obj).each(function() {
var obj = $(this);
obj.click(function (e) {
e.stopPropagation();
$(this).toggleClass("m_open").find(".list_div").slideToggle("fast");
if (window.PIE) {
if (obj.hasClass("m_open")) {
obj.find(".list_div").each(function() {
PIE.attach(this);
})
}
}
})
obj.find(".ul > li").click(function (e) {
e.stopPropagation();
obj.find(".selected span").text ( $(this).text() );
obj.find(".s_val").val( $(this).data("val") );
$(this).addClass("active").siblings().removeClass("active");
$(this).closest(".list_div").slideUp("fast");
obj.removeClass("m_open");
if (window.PIE) {
obj.find(".list_div").each(function() {
PIE.detach(this);
})
}
if ($(this).data('href')) {
window.location.href = $(this).data('href');
}
});
if (obj.find(".ul > li.active").size() > 0) {
obj.find(".selected span").text ( obj.find(".ul > li.active").text() );
} else {
obj.find(".selected span").text ( obj.find(".ul > li:first").addClass("active").text() );
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment