select2.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495
  1. .select2-container {
  2. position: relative;
  3. display: inline-block;
  4. zoom: 1;
  5. *display: inline;
  6. vertical-align: middle;
  7. }
  8. .select2-container,
  9. .select2-drop,
  10. .select2-search,
  11. .select2-search input{
  12. -webkit-box-sizing: border-box; /* webkit */
  13. -khtml-box-sizing: border-box; /* konqueror */
  14. -moz-box-sizing: border-box; /* firefox */
  15. -ms-box-sizing: border-box; /* ie */
  16. box-sizing: border-box; /* css3 */
  17. }
  18. .select2-container .select2-choice {
  19. display: block;
  20. height: 30px;
  21. padding: 0 0 0 8px;
  22. overflow: hidden;
  23. position: relative;
  24. white-space: nowrap;
  25. line-height: 30px;
  26. color: #FFF;
  27. text-decoration: none;
  28. -webkit-background-clip: padding-box;
  29. -moz-background-clip: padding;
  30. background-clip: padding-box;
  31. -webkit-touch-callout: none;
  32. -webkit-user-select: none;
  33. -khtml-user-select: none;
  34. -moz-user-select: none;
  35. -ms-user-select: none;
  36. user-select: none;
  37. -moz-border-radius: 3px;
  38. -webkit-border-radius: 3px;
  39. border-radius: 3px;
  40. background: rgba(0,0,0,0.2);
  41. }
  42. .select2-container.select2-drop-above .select2-choice {
  43. border-bottom-color: #C0CAD5;
  44. }
  45. .select2-container .select2-choice span {
  46. margin-right: 28px;
  47. display: block;
  48. overflow: hidden;
  49. white-space: nowrap;
  50. -ms-text-overflow: ellipsis;
  51. -o-text-overflow: ellipsis;
  52. text-overflow: ellipsis;
  53. }
  54. .select2-container .select2-choice abbr {
  55. display: block;
  56. width: 12px;
  57. height: 12px;
  58. position: absolute;
  59. right: 26px;
  60. top: 8px;
  61. font-size: 1px;
  62. text-decoration: none;
  63. border: 0;
  64. background: url('../../img/select2/select2.png') right top no-repeat;
  65. cursor: pointer;
  66. outline: 0;
  67. }
  68. .select2-container .select2-choice abbr:hover {
  69. background-position: right -11px;
  70. cursor: pointer;
  71. }
  72. .select2-drop-mask {
  73. position: absolute;
  74. left: 0;
  75. top: 0;
  76. z-index: 9998;
  77. background-color: #fff;
  78. opacity: 0;
  79. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* works in IE 8 */
  80. filter: "alpha(opacity=0)"; /* expected to work in IE 8 */
  81. filter: alpha(opacity=0); /* IE 4-7 */
  82. }
  83. .select2-drop {
  84. width: 100%;
  85. margin-top:-1px;
  86. position: absolute;
  87. z-index: 9999;
  88. top: 100%;
  89. background: url('../../img/background/bt_cubs.png') left top repeat #222;
  90. color: #fff;
  91. border-top: 0;
  92. -moz-border-bottom-left-radius: 3px;
  93. -moz-border-bottom-right-radius: 3px;
  94. -webkit-border-bottom-left-radius: 3px;
  95. -webkit-border-bottom-right-radius: 3px;
  96. border-bottom-left-radius: 3px;
  97. border-bottom-right-radius: 3px;
  98. }
  99. .select2-drop.select2-drop-above {
  100. margin-top: 1px;
  101. border-bottom: 0;
  102. -moz-border-top-left-radius: 3px;
  103. -moz-border-top-right-radius: 3px;
  104. -webkit-border-top-left-radius: 3px;
  105. -webkit-border-top-right-radius: 3px;
  106. border-top-left-radius: 3px;
  107. border-top-right-radius: 3px;
  108. }
  109. .select2-container .select2-choice div {
  110. display: block;
  111. width: 30px;
  112. height: 100%;
  113. position: absolute;
  114. right: 0;
  115. top: 0;
  116. -webkit-background-clip: padding-box;
  117. -moz-background-clip: padding;
  118. background-clip: padding-box;
  119. background: rgba(0,0,0,0.4);
  120. }
  121. .select2-container .select2-choice div b {
  122. display: block;
  123. width: 100%;
  124. height: 100%;
  125. background: url('../../img/select2/select2.png') no-repeat 7px 2px;
  126. }
  127. .select2-search {
  128. display: inline-block;
  129. width: 100%;
  130. min-height: 28px;
  131. margin: 0;
  132. padding: 4px;
  133. position: relative;
  134. z-index: 10000;
  135. white-space: nowrap;
  136. }
  137. .select2-search-hidden {
  138. display: block;
  139. position: absolute;
  140. left: -10000px;
  141. }
  142. .select2-search input {
  143. width: 100%;
  144. height: auto !important;
  145. min-height: 30px;
  146. padding: 4px 20px 4px 5px;
  147. margin: 0;
  148. outline: 0;
  149. font-family: sans-serif;
  150. font-size: 1em;
  151. -webkit-box-shadow: none;
  152. -moz-box-shadow: none;
  153. box-shadow: none;
  154. }
  155. .select2-drop.select2-drop-above .select2-search input {
  156. margin-top: 4px !important;
  157. }
  158. .select2-search input.select2-active {
  159. background: #fff url('../../img/select2/select2-spinner.gif') no-repeat 100%;
  160. background: url('../../img/select2/select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
  161. background: url('../../img/select2/select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  162. background: url('../../img/select2/select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  163. background: url('../../img/select2/select2-spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
  164. background: url('../../img/select2/select2-spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
  165. background: url('../../img/select2/select2-spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
  166. }
  167. .select2-container-active .select2-choice,
  168. .select2-container-active .select2-choices {
  169. outline: none;
  170. }
  171. .select2-dropdown-open .select2-choice {
  172. }
  173. .select2-dropdown-open .select2-choice div {
  174. border-left: none;
  175. filter: none;
  176. }
  177. .select2-dropdown-open .select2-choice div b {
  178. background-position: -11px 2px;
  179. }
  180. /* results */
  181. .select2-results {
  182. max-height: 200px;
  183. padding: 0 0 0 4px;
  184. margin: 4px 4px 4px 0;
  185. position: relative;
  186. overflow-x: hidden;
  187. overflow-y: auto;
  188. -webkit-tap-highlight-color: rgba(0,0,0,0);
  189. }
  190. .select2-results ul.select2-result-sub {
  191. margin: 0; padding: 0px;
  192. }
  193. .select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px }
  194. .select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px }
  195. .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px }
  196. .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px }
  197. .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px }
  198. .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px }
  199. .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px }
  200. .select2-results li {
  201. list-style: none;
  202. display: list-item;
  203. background-image: none;
  204. }
  205. .select2-results li.select2-result-with-children > .select2-result-label {
  206. font-weight: bold;
  207. }
  208. .select2-results .select2-result-label {
  209. padding: 3px 7px 4px;
  210. margin: 0;
  211. cursor: pointer;
  212. min-height: 1em;
  213. -webkit-touch-callout: none;
  214. -webkit-user-select: none;
  215. -khtml-user-select: none;
  216. -moz-user-select: none;
  217. -ms-user-select: none;
  218. user-select: none;
  219. }
  220. .select2-results .select2-highlighted {
  221. background: url('../../img/background/bt_cubs_a.png') left top repeat transparent;
  222. color: #FFF;
  223. }
  224. .select2-results li em {
  225. background: #feffde;
  226. font-style: normal;
  227. }
  228. .select2-results .select2-highlighted em {
  229. background: transparent;
  230. }
  231. .select2-results .select2-highlighted ul {
  232. background: white;
  233. color: #000;
  234. }
  235. .select2-results .select2-no-results,
  236. .select2-results .select2-searching,
  237. .select2-results .select2-selection-limit {
  238. background: #1B1B1B;
  239. display: list-item;
  240. padding: 5px;
  241. }
  242. /*
  243. disabled look for disabled choices in the results dropdown
  244. */
  245. .select2-results .select2-disabled.select2-highlighted {
  246. color: #666;
  247. background: #f4f4f4;
  248. display: list-item;
  249. cursor: default;
  250. }
  251. .select2-results .select2-disabled {
  252. background: #f4f4f4;
  253. display: list-item;
  254. cursor: default;
  255. }
  256. .select2-results .select2-selected {
  257. display: none;
  258. }
  259. .select2-more-results.select2-active {
  260. background: #f4f4f4 url('../../img/select2/select2-spinner.gif') no-repeat 100%;
  261. }
  262. .select2-more-results {
  263. background: #f4f4f4;
  264. display: list-item;
  265. }
  266. /* disabled styles */
  267. .select2-container.select2-container-disabled .select2-choice {
  268. background-color: #f4f4f4;
  269. background-image: none;
  270. border: 1px solid #ddd;
  271. cursor: default;
  272. }
  273. .select2-container.select2-container-disabled .select2-choice div {
  274. background-color: #f4f4f4;
  275. background-image: none;
  276. border-left: 0;
  277. }
  278. .select2-container.select2-container-disabled .select2-choice abbr {
  279. display: none
  280. }
  281. /* multiselect */
  282. .select2-container-multi .select2-choices {
  283. height: auto !important;
  284. height: 1%;
  285. margin: 0;
  286. padding: 0;
  287. position: relative;
  288. cursor: text;
  289. overflow: hidden;
  290. background: rgba(0,0,0,0.2);
  291. min-height: 30px;
  292. -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
  293. }
  294. .select2-locked {
  295. padding: 3px 5px 3px 5px !important;
  296. }
  297. .select2-container-multi.select2-container-active .select2-choices {
  298. outline: none;
  299. }
  300. .select2-container-multi .select2-choices li {
  301. float: left;
  302. list-style: none;
  303. }
  304. .select2-container-multi .select2-choices .select2-search-field {
  305. margin: 0;
  306. padding: 0;
  307. white-space: nowrap;
  308. width: 120px;
  309. }
  310. .select2-container-multi .select2-choices .select2-search-field input {
  311. margin: 0px !important;
  312. font-family: sans-serif;
  313. font-size: 100%;
  314. color: #FFF;
  315. outline: 0;
  316. border: 0;
  317. -webkit-box-shadow: none;
  318. -moz-box-shadow: none;
  319. box-shadow: none;
  320. background: transparent !important;
  321. }
  322. .select2-container-multi .select2-choices .select2-search-field input.select2-active {
  323. background: #fff url('../../img/select2/select2-spinner.gif') no-repeat 100% !important;
  324. }
  325. .select2-default {
  326. color: #999 !important;
  327. }
  328. .select2-container-multi .select2-choices .select2-search-choice {
  329. padding: 3px 18px 4px 5px;
  330. margin: 5px 0 3px 5px;
  331. position: relative;
  332. line-height: 13px;
  333. cursor: default;
  334. background: rgba(0,0,0,0.3);
  335. color: #FFF;
  336. -webkit-background-clip: padding-box;
  337. -moz-background-clip: padding;
  338. background-clip: padding-box;
  339. -webkit-touch-callout: none;
  340. -webkit-user-select: none;
  341. -khtml-user-select: none;
  342. -moz-user-select: none;
  343. -ms-user-select: none;
  344. user-select: none;
  345. }
  346. .select2-container-multi .select2-choices .select2-search-choice span {
  347. cursor: default;
  348. }
  349. .select2-container-multi .select2-choices .select2-search-choice-focus {
  350. background: #d4d4d4;
  351. }
  352. .select2-search-choice-close {
  353. display: block;
  354. width: 9px;
  355. height: 13px;
  356. position: absolute;
  357. right: 3px;
  358. top: 3px;
  359. font-size: 1px;
  360. outline: none;
  361. }
  362. .select2-search-choice-close:before{
  363. content: "x";
  364. font-family: Arial;
  365. font-size: 11px;
  366. color: #AAA;
  367. text-align: center;
  368. }
  369. .select2-container-multi .select2-search-choice-close {
  370. right: 3px;
  371. }
  372. /* disabled styles */
  373. .select2-container-multi.select2-container-disabled .select2-choices{
  374. background-color: #f4f4f4;
  375. background-image: none;
  376. border: 1px solid #ddd;
  377. cursor: default;
  378. }
  379. .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
  380. padding: 3px 5px 3px 5px;
  381. border: 1px solid #ddd;
  382. background-image: none;
  383. background-color: #f4f4f4;
  384. }
  385. .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
  386. display: none;
  387. }
  388. /* end multiselect */
  389. .select2-result-selectable .select2-match,
  390. .select2-result-unselectable .select2-match {
  391. text-decoration: underline;
  392. }
  393. .select2-offscreen {
  394. border: 0;
  395. clip: rect(0 0 0 0);
  396. height: 1px;
  397. margin: -1px;
  398. overflow: hidden;
  399. padding: 0;
  400. position: absolute;
  401. width: 1px;
  402. }
  403. /* Retina-ize icons */
  404. @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
  405. .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice div b {
  406. background-image: url('../../img/select2/select2x2.png') !important;
  407. background-repeat: no-repeat !important;
  408. background-size: 60px 40px !important;
  409. }
  410. .select2-search input {
  411. background-position: 100% -21px !important;
  412. }
  413. }