Created
November 22, 2012 14:11
-
-
Save whuhacker/4131370 to your computer and use it in GitHub Desktop.
chosen style for twitter bootstrap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.chosen { | |
width: 220px; | |
} | |
.chosen-mini { | |
width: 70px; | |
} | |
.chosen-small { | |
width: 100px; | |
} | |
.chosen-medium { | |
width: 160px; | |
} | |
.chosen-large { | |
width: 220px; | |
} | |
.chosen-xlarge { | |
width: 280px; | |
} | |
.chosen-xxlarge { | |
width: 540px; | |
} | |
.chzn-container { | |
display: inline-block; | |
*display: inline; | |
/* IE7 inline-block hack */ | |
*zoom: 1; | |
font-size: 14px; | |
position: relative; | |
vertical-align: middle; | |
} | |
.chzn-container .chzn-drop { | |
background: #ffffff; | |
border: 1px solid #999999; | |
border-top-color: #d9d9d9; | |
-webkit-border-radius: 4px; | |
-moz-border-radius: 4px; | |
border-radius: 4px; | |
-webkit-border-top-left-radius: 0; | |
-webkit-border-top-right-radius: 0; | |
-moz-border-radius-topleft: 0; | |
-moz-border-radius-topright: 0; | |
border-top-left-radius: 0; | |
border-top-right-radius: 0; | |
-webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, .25); | |
-moz-box-shadow: 0 8px 8px rgba(0, 0, 0, .25); | |
box-shadow: 0 8px 8px rgba(0, 0, 0, .25); | |
margin-top: -1px; | |
position: absolute; | |
top: 29px; | |
left: 0; | |
z-index: 1060; | |
} | |
.chzn-container .chzn-results { | |
color: #555555; | |
margin: 0 4px 4px 0; | |
max-height: 240px; | |
padding: 0 0 0 4px; | |
position: relative; | |
overflow-x: hidden; | |
overflow-y: auto; | |
-webkit-overflow-scrolling: touch; | |
} | |
.chzn-container .chzn-results li { | |
display: none; | |
line-height: 20px; | |
list-style: none; | |
margin: 0; | |
padding: 5px 6px; | |
} | |
.chzn-container .chzn-results li em { | |
background: #feffde; | |
font-style: normal; | |
} | |
.chzn-container .chzn-results .active-result { | |
cursor: pointer; | |
display: list-item; | |
} | |
.chzn-container .chzn-results .highlighted { | |
background-color: #0088cc; | |
color: #ffffff; | |
} | |
.chzn-container .chzn-results .highlighted em { | |
background: transparent; | |
} | |
.chzn-container .chzn-results .no-results { | |
background: #eeeeee; | |
display: list-item; | |
} | |
.chzn-container .chzn-results .group-result { | |
cursor: default; | |
color: #999; | |
font-weight: bold; | |
} | |
.chzn-container .chzn-results .group-option { | |
padding-left: 15px; | |
} | |
.chzn-container .chzn-results-scroll { | |
background: #ffffff; | |
margin: 0 4px; | |
position: absolute; | |
text-align: center; | |
width: 321px; | |
z-index: 1; | |
} | |
.chzn-container .chzn-results-scroll span { | |
display: inline-block; | |
height: 20px; | |
text-indent: -5000px; | |
width: 9px; | |
} | |
.chzn-container .chzn-results-scroll-down { | |
bottom: 0; | |
} | |
.chzn-container .chzn-results-scroll-down span { | |
background: url('/img/chosen-sprite.png') no-repeat -4px -3px; | |
} | |
.chzn-container .chzn-results-scroll-up span { | |
background: url('/img/chosen-sprite.png') no-repeat -22px -3px; | |
} | |
.chzn-container-single .chzn-single { | |
background-color: #ffffff; | |
background-color: #f8f8f8; | |
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee); | |
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#eeeeee)); | |
background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee); | |
background-image: -o-linear-gradient(top, #ffffff, #eeeeee); | |
background-image: linear-gradient(to bottom, #ffffff, #eeeeee); | |
background-repeat: repeat-x; | |
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeeeeee', GradientType=0); | |
-webkit-background-clip: padding-box; | |
-moz-background-clip: padding; | |
background-clip: padding-box; | |
border: 1px solid #cccccc; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); | |
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); | |
color: #555555; | |
display: block; | |
height: 28px; | |
overflow: hidden; | |
line-height: 28px; | |
padding: 0 0 0 8px; | |
position: relative; | |
text-decoration: none; | |
white-space: nowrap; | |
} | |
.chzn-container-single .chzn-single span { | |
display: block; | |
margin-right: 26px; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
.chzn-container-single .chzn-single abbr { | |
background: url('/img/chosen-sprite.png') right top no-repeat; | |
display: block; | |
font-size: 1px; | |
height: 10px; | |
position: absolute; | |
right: 26px; | |
top: 8px; | |
width: 12px; | |
} | |
.chzn-container-single .chzn-single abbr:hover { | |
background-position: right -11px; | |
} | |
.chzn-container-single .chzn-single.chzn-disabled .chzn-single abbr:hover { | |
background-position: right 2px; | |
} | |
.chzn-container-single .chzn-single div { | |
display: block; | |
height: 100%; | |
position: absolute; | |
top: 0; | |
right: 0; | |
width: 18px; | |
} | |
.chzn-container-single .chzn-single div b { | |
background: url('/img/chosen-sprite.png') no-repeat 0 2px; | |
display: block; | |
height: 100%; | |
width: 100%; | |
} | |
.chzn-container-single .chzn-default { | |
color: #999999; | |
} | |
.chzn-container-single .chzn-search { | |
margin: 0; | |
padding: 3px 4px; | |
position: relative; | |
white-space: nowrap; | |
z-index: 1000; | |
} | |
.chzn-container-single .chzn-search input { | |
background: url('/img/chosen-sprite.png') no-repeat 100% -21px, #ffffff; | |
border: 1px solid #cccccc; | |
-webkit-border-radius: 4px; | |
-moz-border-radius: 4px; | |
border-radius: 4px; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); | |
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); | |
margin: 1px 0; | |
padding: 4px 20px 4px 4px; | |
} | |
.chzn-container-single .chzn-drop { | |
-webkit-border-radius: 4px; | |
-moz-border-radius: 4px; | |
border-radius: 4px; | |
-webkit-border-top-left-radius: 0; | |
-webkit-border-top-right-radius: 0; | |
-moz-border-radius-topleft: 0; | |
-moz-border-radius-topright: 0; | |
border-top-left-radius: 0; | |
border-top-right-radius: 0; | |
-webkit-background-clip: padding-box; | |
-moz-background-clip: padding; | |
background-clip: padding-box; | |
} | |
.chzn-container-single-nosearch .chzn-search input { | |
position: absolute; | |
left: -9000px; | |
} | |
.chzn-container-multi .chzn-choices { | |
background-color: #ffffff; | |
border: 1px solid #cccccc; | |
-webkit-border-radius: 4px; | |
-moz-border-radius: 4px; | |
border-radius: 4px; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); | |
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); | |
cursor: text; | |
height: auto !important; | |
height: 1%; | |
margin: 0; | |
overflow: hidden; | |
padding: 0; | |
position: relative; | |
} | |
.chzn-container-multi .chzn-choices li { | |
float: left; | |
list-style: none; | |
} | |
.chzn-container-multi .chzn-choices .search-field { | |
margin: 0; | |
padding: 0; | |
white-space: nowrap; | |
} | |
.chzn-container-multi .chzn-choices .search-field input { | |
background: transparent !important; | |
border: 0 !important; | |
-webkit-box-shadow: none; | |
-moz-box-shadow: none; | |
box-shadow: none; | |
color: #555555; | |
height: 20px; | |
margin: 0; | |
padding: 4px; | |
outline: 0; | |
} | |
.chzn-container-multi .chzn-choices .search-field .default { | |
color: #999; | |
} | |
.chzn-container-multi .chzn-choices .search-choice { | |
-webkit-background-clip: padding-box; | |
-moz-background-clip: padding; | |
background-clip: padding-box; | |
background-color: #eeeeee; | |
border: 1px solid #cccccc; | |
-webkit-border-radius: 4px; | |
-moz-border-radius: 4px; | |
border-radius: 4px; | |
background-color: #f8f8f8; | |
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee); | |
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#eeeeee)); | |
background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee); | |
background-image: -o-linear-gradient(top, #ffffff, #eeeeee); | |
background-image: linear-gradient(to bottom, #ffffff, #eeeeee); | |
background-repeat: repeat-x; | |
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeeeeee', GradientType=0); | |
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); | |
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); | |
color: #333333; | |
cursor: default; | |
line-height: 13px; | |
margin: 3px 0 3px 5px; | |
padding: 3px 20px 3px 5px; | |
position: relative; | |
} | |
.chzn-container-multi .chzn-choices .search-choice .search-choice-close { | |
background: url('/img/chosen-sprite.png') right top no-repeat; | |
display: block; | |
font-size: 1px; | |
height: 13px; | |
position: absolute; | |
right: 3px; | |
top: 4px; | |
width: 12px; | |
} | |
.chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover { | |
background-position: right -11px; | |
} | |
.chzn-container-multi .chzn-choices .search-choice-focus { | |
background: #d4d4d4; | |
} | |
.chzn-container-multi .chzn-choices .search-choice-focus .search-choice-close { | |
background-position: right -11px; | |
} | |
.chzn-container-multi .chzn-results { | |
margin: 0 0 0 0; | |
padding: 0; | |
} | |
.chzn-container-multi .chzn-drop .result-selected { | |
display: none; | |
} | |
.chzn-container-active .chzn-single { | |
border: 1px solid rgba(82, 168, 236, 0.8); | |
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6); | |
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6); | |
box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6); | |
-webkit-transition: border linear .2s, box-shadow linear .2s; | |
-moz-transition: border linear .2s, box-shadow linear .2s; | |
-o-transition: border linear .2s, box-shadow linear .2s; | |
transition: border linear .2s, box-shadow linear .2s; | |
} | |
.chzn-container-active .chzn-single-with-drop { | |
background-color: #eeeeee; | |
border: 1px solid rgba(82, 168, 236, 0.8); | |
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6); | |
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6); | |
box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6); | |
-webkit-transition: border linear .2s, box-shadow linear .2s; | |
-moz-transition: border linear .2s, box-shadow linear .2s; | |
-o-transition: border linear .2s, box-shadow linear .2s; | |
transition: border linear .2s, box-shadow linear .2s; | |
} | |
.chzn-container-active .chzn-single-with-drop div { | |
background: transparent; | |
border-left: none; | |
} | |
.chzn-container-active .chzn-single-with-drop div b { | |
background-position: -18px 2px; | |
} | |
.chzn-container-active .chzn-choices { | |
border: 1px solid rgba(82, 168, 236, 0.8); | |
-webkit-border-bottom-left-radius: 0; | |
-webkit-border-bottom-right-radius: 0; | |
-moz-border-radius-bottomleft: 0; | |
-moz-border-radius-bottomright: 0; | |
border-bottom-left-radius: 0; | |
border-bottom-right-radius: 0; | |
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6); | |
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6); | |
box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6); | |
-webkit-transition: border linear .2s, box-shadow linear .2s; | |
-moz-transition: border linear .2s, box-shadow linear .2s; | |
-o-transition: border linear .2s, box-shadow linear .2s; | |
transition: border linear .2s, box-shadow linear .2s; | |
} | |
.chzn-container-active .chzn-choices .search-field input { | |
color: #111 !important; | |
} | |
.chzn-disabled { | |
cursor: default; | |
opacity: 0.5 !important; | |
} | |
.chzn-disabled .chzn-single { | |
cursor: default; | |
} | |
.chzn-disabled .chzn-choices .search-choice .search-choice-close { | |
cursor: default; | |
} | |
.chzn-rtl { | |
text-align: right; | |
} | |
.chzn-rtl .chzn-single { | |
padding: 0 8px 0 0; | |
overflow: visible; | |
} | |
.chzn-rtl .chzn-single span { | |
margin-left: 26px; | |
margin-right: 0; | |
direction: rtl; | |
} | |
.chzn-rtl .chzn-single div { | |
left: 3px; | |
right: auto; | |
} | |
.chzn-rtl .chzn-single abbr { | |
left: 26px; | |
right: auto; | |
} | |
.chzn-rtl .chzn-choices .search-field input { | |
direction: rtl; | |
} | |
.chzn-rtl .chzn-choices li { | |
float: right; | |
} | |
.chzn-rtl .chzn-choices .search-choice { | |
margin: 3px 5px 3px 0; | |
padding: 3px 5px 3px 19px; | |
} | |
.chzn-rtl .chzn-choices .search-choice .search-choice-close { | |
background-position: right top; | |
left: 4px; | |
right: auto; | |
} | |
.chzn-rtl.chzn-container-single .chzn-results { | |
margin: 0 0 4px 4px; | |
padding: 0 4px 0 0; | |
} | |
.chzn-rtl .chzn-results .group-option { | |
padding-left: 0; | |
padding-right: 15px; | |
} | |
.chzn-rtl.chzn-container-active .chzn-single-with-drop div { | |
border-right: none; | |
} | |
.chzn-rtl .chzn-search input { | |
background: url('/img/chosen-sprite.png') no-repeat -38px -22px, #ffffff; | |
direction: rtl; | |
padding: 4px 5px 4px 20px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment