Skip to content

Instantly share code, notes, and snippets.

@jimi008
Created June 6, 2016 12:43
Show Gist options
  • Save jimi008/a2d4337ec79cca67e97c58581f283e00 to your computer and use it in GitHub Desktop.
Save jimi008/a2d4337ec79cca67e97c58581f283e00 to your computer and use it in GitHub Desktop.
Custom select dropdown arrow
<link href="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox-0.2.min.js"></script>
<link href="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox-0.2.min.js"></script>
<select id="language">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
<script type="text/javascript">
$(function () {
$("#language").selectbox();
});
</script>
<script type="text/javascript">
$j=jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
$j("select").selectbox();
});
</script>
.sbToggle {
background: url("img/arrow-down.png") no-repeat scroll 0 10px rgba(0, 0, 0, 0);
display: block;
height: 30px;
outline: medium none;
position: absolute;
right: 0;
top: 0;
width: 30px;
}
.sbHolder {
background-color: #f4dfde;
border: 1px solid #d1b9b8;
font-family: "TheSansPlain";
font-size: 16px;
font-weight: normal;
height: 30px;
position: relative;
width: 250px;
}
.sbSelector {
display: block;
height: 30px;
left: 0;
line-height: 30px;
outline: medium none;
overflow: hidden;
position: absolute;
text-indent: 10px;
top: 0;
width: 170px;
}
.sbSelector:link, .sbSelector:visited {
text-decoration: none !important;
}
.sbOptions {
background-color: #f4dfde;
border: 1px solid #d1b9b8;
left: -1px;
list-style: none outside none !important;
margin: 0;
overflow-y: auto;
padding: 0;
position: absolute;
top: 30px;
width: 250px;
z-index: 1;
}
.sbOptions a {
border-bottom: 1px dotted #d1b9b8;
display: block;
outline: medium none;
padding: 7px 0 7px 3px;
}
.sbOptions a:link, .sbOptions a:visited, .sbOptions a:hover {
text-decoration: none !important;
}
.sbOptions li {
padding: 0 7px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment