bootstrap-chosen.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
  1. .chosen-select {
  2. width: 100%; }
  3. .chosen-select-deselect {
  4. width: 100%; }
  5. .chosen-container {
  6. display: inline-block;
  7. font-size: 13px;
  8. position: relative;
  9. vertical-align: middle; }
  10. .chosen-container .chosen-drop {
  11. background: #fff;
  12. border: 1px solid #e5e6e7;
  13. border-bottom-right-radius: 4px;
  14. border-bottom-left-radius: 4px;
  15. margin-top: -1px;
  16. position: absolute;
  17. top: 100%;
  18. left: -9000px;
  19. z-index: 1060; }
  20. .chosen-container.chosen-with-drop .chosen-drop {
  21. left: 0;
  22. right: 0; }
  23. .chosen-container .chosen-results {
  24. color: #555555;
  25. margin: 0 4px 4px 0;
  26. max-height: 240px;
  27. padding: 0 0 0 4px;
  28. position: relative;
  29. overflow-x: hidden;
  30. overflow-y: auto;
  31. -webkit-overflow-scrolling: touch; }
  32. .chosen-container .chosen-results li {
  33. display: none;
  34. line-height: 1.42857;
  35. list-style: none;
  36. margin: 0;
  37. padding: 5px 6px; }
  38. .chosen-container .chosen-results li em {
  39. background: #feffde;
  40. font-style: normal; }
  41. .chosen-container .chosen-results li.group-result {
  42. display: list-item;
  43. cursor: default;
  44. color: #999;
  45. font-weight: bold; }
  46. .chosen-container .chosen-results li.group-option {
  47. padding-left: 15px; }
  48. .chosen-container .chosen-results li.active-result {
  49. cursor: pointer;
  50. display: list-item; }
  51. .chosen-container .chosen-results li.highlighted {
  52. background-color: #1ab394;
  53. background-image: none;
  54. color: white; }
  55. .chosen-container .chosen-results li.highlighted em {
  56. background: transparent; }
  57. .chosen-container .chosen-results li.disabled-result {
  58. display: list-item;
  59. color: #777777; }
  60. .chosen-container .chosen-results .no-results {
  61. background: #eeeeee;
  62. display: list-item; }
  63. .chosen-container .chosen-results-scroll {
  64. background: white;
  65. margin: 0 4px;
  66. position: absolute;
  67. text-align: center;
  68. width: 321px;
  69. z-index: 1; }
  70. .chosen-container .chosen-results-scroll span {
  71. display: inline-block;
  72. height: 1.42857;
  73. text-indent: -5000px;
  74. width: 9px; }
  75. .chosen-container .chosen-results-scroll-down {
  76. bottom: 0; }
  77. .chosen-container .chosen-results-scroll-down span {
  78. background: url("chosen-sprite.png") no-repeat -4px -3px; }
  79. .chosen-container .chosen-results-scroll-up span {
  80. background: url("chosen-sprite.png") no-repeat -22px -3px; }
  81. .chosen-container-single .chosen-single {
  82. background-color: #fff;
  83. -webkit-background-clip: padding-box;
  84. -moz-background-clip: padding;
  85. background-clip: padding-box;
  86. border: 1px solid #e5e6e7;
  87. border-top-right-radius: 4px;
  88. border-top-left-radius: 4px;
  89. border-bottom-right-radius: 4px;
  90. border-bottom-left-radius: 4px;
  91. color: #555555;
  92. display: block;
  93. height: 34px;
  94. overflow: hidden;
  95. line-height: 24px;
  96. padding: 0 0 0 8px;
  97. position: relative;
  98. text-decoration: none;
  99. white-space: nowrap; }
  100. .chosen-container-single .chosen-single span {
  101. display: block;
  102. margin-right: 26px;
  103. overflow: hidden;
  104. text-overflow: ellipsis;
  105. white-space: nowrap; }
  106. .chosen-container-single .chosen-single abbr {
  107. background: url("chosen-sprite.png") right top no-repeat;
  108. display: block;
  109. font-size: 1px;
  110. height: 10px;
  111. position: absolute;
  112. right: 26px;
  113. top: 12px;
  114. width: 12px; }
  115. .chosen-container-single .chosen-single abbr:hover {
  116. background-position: right -11px; }
  117. .chosen-container-single .chosen-single.chosen-disabled .chosen-single abbr:hover {
  118. background-position: right 2px; }
  119. .chosen-container-single .chosen-single div {
  120. display: block;
  121. height: 100%;
  122. position: absolute;
  123. top: 0;
  124. right: 0;
  125. width: 18px; }
  126. .chosen-container-single .chosen-single div b {
  127. background: url("chosen-sprite.png") no-repeat 0 7px;
  128. display: block;
  129. height: 100%;
  130. width: 100%; }
  131. .chosen-container-single .chosen-default {
  132. color: #777777; }
  133. .chosen-container-single .chosen-search {
  134. margin: 0;
  135. padding: 3px 4px;
  136. position: relative;
  137. white-space: nowrap;
  138. z-index: 1000; }
  139. .chosen-container-single .chosen-search input[type="text"] {
  140. background: url("chosen-sprite.png") no-repeat 100% -20px, #fff;
  141. border: 1px solid #e5e6e7;
  142. border-top-right-radius: 4px;
  143. border-top-left-radius: 4px;
  144. border-bottom-right-radius: 4px;
  145. border-bottom-left-radius: 4px;
  146. margin: 1px 0;
  147. padding: 4px 20px 4px 4px;
  148. width: 100%; }
  149. .chosen-container-single .chosen-drop {
  150. margin-top: -1px;
  151. border-bottom-right-radius: 4px;
  152. border-bottom-left-radius: 4px;
  153. -webkit-background-clip: padding-box;
  154. -moz-background-clip: padding;
  155. background-clip: padding-box; }
  156. .chosen-container-single-nosearch .chosen-search input[type="text"] {
  157. position: absolute;
  158. left: -9000px; }
  159. .chosen-container-multi .chosen-choices {
  160. background-color: #fff;
  161. border: 1px solid #e5e6e7;
  162. border-top-right-radius: 4px;
  163. border-top-left-radius: 4px;
  164. border-bottom-right-radius: 4px;
  165. border-bottom-left-radius: 4px;
  166. cursor: text;
  167. height: auto !important;
  168. height: 1%;
  169. margin: 0;
  170. overflow: hidden;
  171. padding: 0;
  172. position: relative; }
  173. .chosen-container-multi .chosen-choices li {
  174. float: left;
  175. list-style: none; }
  176. .chosen-container-multi .chosen-choices .search-field {
  177. margin: 0;
  178. padding: 0;
  179. white-space: nowrap; }
  180. .chosen-container-multi .chosen-choices .search-field input[type="text"] {
  181. background: transparent !important;
  182. border: 0 !important;
  183. -webkit-box-shadow: none;
  184. box-shadow: none;
  185. color: #555555;
  186. height: 32px;
  187. margin: 0;
  188. padding: 4px;
  189. outline: 0; }
  190. .chosen-container-multi .chosen-choices .search-field .default {
  191. color: #999; }
  192. .chosen-container-multi .chosen-choices .search-choice {
  193. -webkit-background-clip: padding-box;
  194. -moz-background-clip: padding;
  195. background-clip: padding-box;
  196. background-color: #eeeeee;
  197. border: 1px solid #e5e6e7;
  198. border-top-right-radius: 4px;
  199. border-top-left-radius: 4px;
  200. border-bottom-right-radius: 4px;
  201. border-bottom-left-radius: 4px;
  202. background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 100%);
  203. background-image: -o-linear-gradient(top, white 0%, #eeeeee 100%);
  204. background-image: linear-gradient(to bottom, white 0%, #eeeeee 100%);
  205. background-repeat: repeat-x;
  206. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);
  207. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  208. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  209. color: #333333;
  210. cursor: default;
  211. line-height: 13px;
  212. margin: 6px 0 3px 5px;
  213. padding: 3px 20px 3px 5px;
  214. position: relative; }
  215. .chosen-container-multi .chosen-choices .search-choice .search-choice-close {
  216. background: url("chosen-sprite.png") right top no-repeat;
  217. display: block;
  218. font-size: 1px;
  219. height: 10px;
  220. position: absolute;
  221. right: 4px;
  222. top: 5px;
  223. width: 12px;
  224. cursor: pointer; }
  225. .chosen-container-multi .chosen-choices .search-choice .search-choice-close:hover {
  226. background-position: right -11px; }
  227. .chosen-container-multi .chosen-choices .search-choice-focus {
  228. background: #d4d4d4; }
  229. .chosen-container-multi .chosen-choices .search-choice-focus .search-choice-close {
  230. background-position: right -11px; }
  231. .chosen-container-multi .chosen-results {
  232. margin: 0 0 0 0;
  233. padding: 0; }
  234. .chosen-container-multi .chosen-drop .result-selected {
  235. display: none; }
  236. .chosen-container-active .chosen-single {
  237. border: 1px solid #e5e6e7;
  238. -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  239. -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  240. transition: border linear 0.2s, box-shadow linear 0.2s; }
  241. .chosen-container-active.chosen-with-drop .chosen-single {
  242. background-color: #fff;
  243. border: 1px solid #1ab394;
  244. border-bottom-right-radius: 0;
  245. border-bottom-left-radius: 0;
  246. -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  247. -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  248. transition: border linear 0.2s, box-shadow linear 0.2s; }
  249. .chosen-container-active.chosen-with-drop .chosen-single div {
  250. background: transparent;
  251. border-left: none; }
  252. .chosen-container-active.chosen-with-drop .chosen-single div b {
  253. background-position: -18px 7px; }
  254. .chosen-container-active .chosen-choices {
  255. border: 1px solid #1ab394;
  256. border-bottom-right-radius: 0;
  257. border-bottom-left-radius: 0;
  258. -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  259. -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  260. transition: border linear 0.2s, box-shadow linear 0.2s; }
  261. .chosen-container-active .chosen-choices .search-field input[type="text"] {
  262. color: #111 !important; }
  263. .chosen-container-active.chosen-with-drop .chosen-choices {
  264. border-bottom-right-radius: 0;
  265. border-bottom-left-radius: 0; }
  266. .chosen-disabled {
  267. cursor: default;
  268. opacity: 0.5 !important; }
  269. .chosen-disabled .chosen-single {
  270. cursor: default; }
  271. .chosen-disabled .chosen-choices .search-choice .search-choice-close {
  272. cursor: default; }
  273. .chosen-rtl {
  274. text-align: right; }
  275. .chosen-rtl .chosen-single {
  276. padding: 0 8px 0 0;
  277. overflow: visible; }
  278. .chosen-rtl .chosen-single span {
  279. margin-left: 26px;
  280. margin-right: 0;
  281. direction: rtl; }
  282. .chosen-rtl .chosen-single div {
  283. left: 7px;
  284. right: auto; }
  285. .chosen-rtl .chosen-single abbr {
  286. left: 26px;
  287. right: auto; }
  288. .chosen-rtl .chosen-choices .search-field input[type="text"] {
  289. direction: rtl; }
  290. .chosen-rtl .chosen-choices li {
  291. float: right; }
  292. .chosen-rtl .chosen-choices .search-choice {
  293. margin: 6px 5px 3px 0;
  294. padding: 3px 5px 3px 19px; }
  295. .chosen-rtl .chosen-choices .search-choice .search-choice-close {
  296. background-position: right top;
  297. left: 4px;
  298. right: auto; }
  299. .chosen-rtl.chosen-container-single .chosen-results {
  300. margin: 0 0 4px 4px;
  301. padding: 0 4px 0 0; }
  302. .chosen-rtl .chosen-results .group-option {
  303. padding-left: 0;
  304. padding-right: 15px; }
  305. .chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
  306. border-right: none; }
  307. .chosen-rtl .chosen-search input[type="text"] {
  308. background: url("chosen-sprite.png") no-repeat -28px -20px, #fff;
  309. direction: rtl;
  310. padding: 4px 5px 4px 20px; }
  311. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {
  312. .chosen-rtl .chosen-search input[type="text"],
  313. .chosen-container-single .chosen-single abbr,
  314. .chosen-container-single .chosen-single div b,
  315. .chosen-container-single .chosen-search input[type="text"],
  316. .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
  317. .chosen-container .chosen-results-scroll-down span,
  318. .chosen-container .chosen-results-scroll-up span {
  319. background-image: url("chosen-sprite@2x.png") !important;
  320. background-size: 52px 37px !important;
  321. background-repeat: no-repeat !important; } }
  322. /*# sourceMappingURL=bootstrap-chosen.css.map */