Skip to content

Instantly share code, notes, and snippets.

@markcarrrr
Created June 21, 2016 08:58
Show Gist options
  • Save markcarrrr/d0d9f65e3c964460d5b74b6d3b5c7b56 to your computer and use it in GitHub Desktop.
Save markcarrrr/d0d9f65e3c964460d5b74b6d3b5c7b56 to your computer and use it in GitHub Desktop.
Basic SASS styling for 'chosen' custom select for standard and multi select without search.
.chosen-container {
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: auto !important; // Overwrite style set with JS
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
margin: 0;
}
a {
cursor: pointer;
}
.chosen-choices,
> a {
background-color: #aaa;
color: #000;
display: block;
padding: 9px 36px;
&:after,
&:before {
content: '';
height: 0;
position: absolute;
right: 10px;
width: 0;
}
&:after {
border-bottom: 5px solid $neutral-3;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: 35%;
}
&:before {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid $neutral-3;
top: 60%;
}
}
label & {
span {
padding: 0;
}
}
.chosen-drop {
background-color: #fff;
border: 1px solid #aaa;
left: -9999px;
margin-top: -1px;
min-width: 100%;
position: absolute;
top: 100%;
z-index: 1010;
}
&.chosen-with-drop .chosen-drop {
left: 0;
}
abbr,
.search-field,
.chosen-search,
.chosen-single div {
display: none;
}
}
.chosen-results {
max-height: 320px;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: auto;
li {
cursor: pointer;
display: none;
padding: 5px 10px;
-webkit-touch-callout: none;
white-space: nowrap;
word-wrap: break-word;
&.selected,
&:hover,
&:focus {
background-color: #eee;
}
&.disabled-result,
&.result-selected {
color: #ccc;
cursor: default;
display: list-item;
&:hover,
&:focus {
background: 0;
}
}
}
.active-result {
display: list-item;
}
}
.search-choice-close {
color: #000;
position: absolute;
height: 31px;
line-height: 31px;
right: 0;
width: 31px;
&:after {
content: '\00d7';
display: block;
}
&:hover,
&:focus {
color: #fff;
text-decoration: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment