select2.css 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511
  1. /*
  2. Version: @@ver@@ Timestamp: @@timestamp@@
  3. */
  4. .select2-container {
  5. position: relative;
  6. display: inline-block;
  7. /* inline-block for ie7 */
  8. zoom: 1;
  9. *display: inline;
  10. vertical-align: top;
  11. }
  12. .select2-container,
  13. .select2-drop,
  14. .select2-search,
  15. .select2-search input{
  16. /*
  17. Force border-box so that % widths fit the parent
  18. container without overlap because of margin/padding.
  19. More Info : http://www.quirksmode.org/css/box.html
  20. */
  21. -moz-box-sizing: border-box; /* firefox */
  22. -ms-box-sizing: border-box; /* ie */
  23. -webkit-box-sizing: border-box; /* webkit */
  24. -khtml-box-sizing: border-box; /* konqueror */
  25. box-sizing: border-box; /* css3 */
  26. }
  27. .select2-container .select2-choice {
  28. background-color: #fff;
  29. background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
  30. background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
  31. background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
  32. background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%);
  33. background-image: -ms-linear-gradient(top, #eeeeee 0%, #ffffff 50%);
  34. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#ffffff', GradientType = 0);
  35. background-image: linear-gradient(top, #eeeeee 0%, #ffffff 50%);
  36. -webkit-border-radius: 4px;
  37. -moz-border-radius: 4px;
  38. border-radius: 4px;
  39. -moz-background-clip: padding;
  40. -webkit-background-clip: padding-box;
  41. background-clip: padding-box;
  42. border: 1px solid #aaa;
  43. display: block;
  44. overflow: hidden;
  45. white-space: nowrap;
  46. position: relative;
  47. height: 26px;
  48. line-height: 26px;
  49. padding: 0 0 0 8px;
  50. color: #444;
  51. text-decoration: none;
  52. }
  53. .select2-container.select2-drop-above .select2-choice
  54. {
  55. border-bottom-color: #aaa;
  56. -webkit-border-radius:0px 0px 4px 4px;
  57. -moz-border-radius:0px 0px 4px 4px;
  58. border-radius:0px 0px 4px 4px;
  59. background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.9, white));
  60. background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 90%);
  61. background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 90%);
  62. background-image: -o-linear-gradient(bottom, #eeeeee 0%, white 90%);
  63. background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 90%);
  64. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
  65. background-image: linear-gradient(top, #eeeeee 0%,#ffffff 90%);
  66. }
  67. .select2-container .select2-choice span {
  68. margin-right: 26px;
  69. display: block;
  70. overflow: hidden;
  71. white-space: nowrap;
  72. -o-text-overflow: ellipsis;
  73. -ms-text-overflow: ellipsis;
  74. text-overflow: ellipsis;
  75. }
  76. .select2-container .select2-choice abbr {
  77. display: block;
  78. position: absolute;
  79. right: 26px;
  80. top: 8px;
  81. width: 12px;
  82. height: 12px;
  83. font-size: 1px;
  84. background: url('select2.png') right top no-repeat;
  85. cursor: pointer;
  86. text-decoration: none;
  87. border:0;
  88. outline: 0;
  89. }
  90. .select2-container .select2-choice abbr:hover {
  91. background-position: right -11px;
  92. cursor: pointer;
  93. }
  94. .select2-drop {
  95. background: #fff;
  96. color: #000;
  97. border: 1px solid #aaa;
  98. border-top: 0;
  99. position: absolute;
  100. top: 100%;
  101. -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
  102. -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
  103. -o-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
  104. box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
  105. z-index: 9999;
  106. width:100%;
  107. margin-top:-1px;
  108. -webkit-border-radius: 0 0 4px 4px;
  109. -moz-border-radius: 0 0 4px 4px;
  110. border-radius: 0 0 4px 4px;
  111. }
  112. .select2-drop.select2-drop-above {
  113. -webkit-border-radius: 4px 4px 0px 0px;
  114. -moz-border-radius: 4px 4px 0px 0px;
  115. border-radius: 4px 4px 0px 0px;
  116. margin-top:1px;
  117. border-top: 1px solid #aaa;
  118. border-bottom: 0;
  119. -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
  120. -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
  121. -o-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
  122. box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
  123. }
  124. .select2-container .select2-choice div {
  125. -webkit-border-radius: 0 4px 4px 0;
  126. -moz-border-radius: 0 4px 4px 0;
  127. border-radius: 0 4px 4px 0;
  128. -moz-background-clip: padding;
  129. -webkit-background-clip: padding-box;
  130. background-clip: padding-box;
  131. background: #ccc;
  132. background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
  133. background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
  134. background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
  135. background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
  136. background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%);
  137. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#eeeeee', GradientType = 0);
  138. background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%);
  139. border-left: 1px solid #aaa;
  140. position: absolute;
  141. right: 0;
  142. top: 0;
  143. display: block;
  144. height: 100%;
  145. width: 18px;
  146. }
  147. .select2-container .select2-choice div b {
  148. background: url('select2.png') no-repeat 0 1px;
  149. display: block;
  150. width: 100%;
  151. height: 100%;
  152. }
  153. .select2-search {
  154. display: inline-block;
  155. white-space: nowrap;
  156. z-index: 10000;
  157. min-height: 26px;
  158. width: 100%;
  159. margin: 0;
  160. padding-left: 4px;
  161. padding-right: 4px;
  162. }
  163. .select2-search-hidden {
  164. display: block;
  165. position: absolute;
  166. left: -10000px;
  167. }
  168. .select2-search input {
  169. background: #fff url('select2.png') no-repeat 100% -22px;
  170. background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
  171. background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  172. background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  173. background: url('select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
  174. background: url('select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
  175. background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
  176. padding: 4px 20px 4px 5px;
  177. outline: 0;
  178. border: 1px solid #aaa;
  179. font-family: sans-serif;
  180. font-size: 1em;
  181. width:100%;
  182. margin:0;
  183. height:auto !important;
  184. min-height: 26px;
  185. -webkit-box-shadow: none;
  186. -moz-box-shadow: none;
  187. box-shadow: none;
  188. border-radius: 0;
  189. -moz-border-radius: 0;
  190. -webkit-border-radius: 0;
  191. }
  192. .select2-drop.select2-drop-above .select2-search input
  193. {
  194. margin-top:4px;
  195. }
  196. .select2-search input.select2-active {
  197. background: #fff url('spinner.gif') no-repeat 100%;
  198. background: url('spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
  199. background: url('spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  200. background: url('spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  201. background: url('spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
  202. background: url('spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
  203. background: url('spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
  204. }
  205. .select2-container-active .select2-choice,
  206. .select2-container-active .select2-choices {
  207. -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
  208. -moz-box-shadow : 0 0 5px rgba(0,0,0,.3);
  209. -o-box-shadow : 0 0 5px rgba(0,0,0,.3);
  210. box-shadow : 0 0 5px rgba(0,0,0,.3);
  211. border: 1px solid #5897fb;
  212. outline: none;
  213. }
  214. .select2-dropdown-open .select2-choice {
  215. border: 1px solid #aaa;
  216. border-bottom-color: transparent;
  217. -webkit-box-shadow: 0 1px 0 #fff inset;
  218. -moz-box-shadow : 0 1px 0 #fff inset;
  219. -o-box-shadow : 0 1px 0 #fff inset;
  220. box-shadow : 0 1px 0 #fff inset;
  221. background-color: #eee;
  222. background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
  223. background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
  224. background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
  225. background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
  226. background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
  227. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
  228. background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
  229. -webkit-border-bottom-left-radius : 0;
  230. -webkit-border-bottom-right-radius: 0;
  231. -moz-border-radius-bottomleft : 0;
  232. -moz-border-radius-bottomright: 0;
  233. border-bottom-left-radius : 0;
  234. border-bottom-right-radius: 0;
  235. }
  236. .select2-dropdown-open .select2-choice div {
  237. background: transparent;
  238. border-left: none;
  239. }
  240. .select2-dropdown-open .select2-choice div b {
  241. background-position: -18px 1px;
  242. }
  243. /* results */
  244. .select2-results {
  245. margin: 4px 4px 4px 0;
  246. padding: 0 0 0 4px;
  247. position: relative;
  248. overflow-x: hidden;
  249. overflow-y: auto;
  250. max-height: 200px;
  251. }
  252. .select2-results ul.select2-result-sub {
  253. margin: 0 0 0 0;
  254. }
  255. .select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px }
  256. .select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px }
  257. .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px }
  258. .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 }
  259. .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 }
  260. .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 }
  261. .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 }
  262. .select2-results li {
  263. list-style: none;
  264. display: list-item;
  265. }
  266. .select2-results li.select2-result-with-children > .select2-result-label {
  267. font-weight: bold;
  268. }
  269. .select2-results .select2-result-label {
  270. padding: 3px 7px 4px;
  271. margin: 0;
  272. cursor: pointer;
  273. }
  274. .select2-results .select2-highlighted {
  275. background: #3875d7;
  276. color: #fff;
  277. }
  278. .select2-results li em {
  279. background: #feffde;
  280. font-style: normal;
  281. }
  282. .select2-results .select2-highlighted em {
  283. background: transparent;
  284. }
  285. .select2-results .select2-no-results,
  286. .select2-results .select2-searching,
  287. .select2-results .select2-selection-limit {
  288. background: #f4f4f4;
  289. display: list-item;
  290. }
  291. /*
  292. disabled look for already selected choices in the results dropdown
  293. .select2-results .select2-disabled.select2-highlighted {
  294. color: #666;
  295. background: #f4f4f4;
  296. display: list-item;
  297. cursor: default;
  298. }
  299. .select2-results .select2-disabled {
  300. background: #f4f4f4;
  301. display: list-item;
  302. cursor: default;
  303. }
  304. */
  305. .select2-results .select2-disabled {
  306. display: none;
  307. }
  308. .select2-more-results.select2-active {
  309. background: #f4f4f4 url('spinner.gif') no-repeat 100%;
  310. }
  311. .select2-more-results {
  312. background: #f4f4f4;
  313. display: list-item;
  314. }
  315. /* disabled styles */
  316. .select2-container.select2-container-disabled .select2-choice {
  317. background-color: #f4f4f4;
  318. background-image: none;
  319. border: 1px solid #ddd;
  320. cursor: default;
  321. }
  322. .select2-container.select2-container-disabled .select2-choice div {
  323. background-color: #f4f4f4;
  324. background-image: none;
  325. border-left: 0;
  326. }
  327. /* multiselect */
  328. .select2-container-multi .select2-choices {
  329. background-color: #fff;
  330. background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
  331. background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
  332. background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
  333. background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
  334. background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
  335. background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
  336. border: 1px solid #aaa;
  337. margin: 0;
  338. padding: 0;
  339. cursor: text;
  340. overflow: hidden;
  341. height: auto !important;
  342. height: 1%;
  343. position: relative;
  344. }
  345. .select2-container-multi .select2-choices {
  346. min-height: 26px;
  347. }
  348. .select2-container-multi.select2-container-active .select2-choices {
  349. -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
  350. -moz-box-shadow : 0 0 5px rgba(0,0,0,.3);
  351. -o-box-shadow : 0 0 5px rgba(0,0,0,.3);
  352. box-shadow : 0 0 5px rgba(0,0,0,.3);
  353. border: 1px solid #5897fb;
  354. outline: none;
  355. }
  356. .select2-container-multi .select2-choices li {
  357. float: left;
  358. list-style: none;
  359. }
  360. .select2-container-multi .select2-choices .select2-search-field {
  361. white-space: nowrap;
  362. margin: 0;
  363. padding: 0;
  364. }
  365. .select2-container-multi .select2-choices .select2-search-field input {
  366. color: #666;
  367. background: transparent !important;
  368. font-family: sans-serif;
  369. font-size: 100%;
  370. height: 15px;
  371. padding: 5px;
  372. margin: 1px 0;
  373. outline: 0;
  374. border: 0;
  375. -webkit-box-shadow: none;
  376. -moz-box-shadow : none;
  377. -o-box-shadow : none;
  378. box-shadow : none;
  379. }
  380. .select2-container-multi .select2-choices .select2-search-field input.select2-active {
  381. background: #fff url('spinner.gif') no-repeat 100% !important;
  382. }
  383. .select2-default {
  384. color: #999 !important;
  385. }
  386. .select2-container-multi .select2-choices .select2-search-choice {
  387. -webkit-border-radius: 3px;
  388. -moz-border-radius : 3px;
  389. border-radius : 3px;
  390. -moz-background-clip : padding;
  391. -webkit-background-clip: padding-box;
  392. background-clip : padding-box;
  393. background-color: #e4e4e4;
  394. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
  395. background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
  396. background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  397. background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  398. background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  399. background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  400. background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  401. -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
  402. -moz-box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
  403. box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
  404. color: #333;
  405. border: 1px solid #aaaaaa;
  406. line-height: 13px;
  407. padding: 3px 5px 3px 18px;
  408. margin: 3px 0 3px 5px;
  409. position: relative;
  410. cursor: default;
  411. }
  412. .select2-container-multi .select2-choices .select2-search-choice span {
  413. cursor: default;
  414. }
  415. .select2-container-multi .select2-choices .select2-search-choice-focus {
  416. background: #d4d4d4;
  417. }
  418. .select2-search-choice-close {
  419. display: block;
  420. position: absolute;
  421. right: 3px;
  422. top: 4px;
  423. width: 12px;
  424. height: 13px;
  425. font-size: 1px;
  426. background: url('select2.png') right top no-repeat;
  427. outline: none;
  428. }
  429. .select2-container-multi .select2-search-choice-close {
  430. left: 3px;
  431. }
  432. .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
  433. background-position: right -11px;
  434. }
  435. .select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
  436. background-position: right -11px;
  437. }
  438. /* disabled styles */
  439. .select2-container-multi.select2-container-disabled .select2-choices{
  440. background-color: #f4f4f4;
  441. background-image: none;
  442. border: 1px solid #ddd;
  443. cursor: default;
  444. }
  445. .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
  446. background-image: none;
  447. background-color: #f4f4f4;
  448. border: 1px solid #ddd;
  449. padding: 3px 5px 3px 5px;
  450. }
  451. .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
  452. display: none;
  453. }
  454. /* end multiselect */
  455. .select2-result-selectable .select2-match,
  456. .select2-result-unselectable .select2-result-selectable .select2-match { text-decoration: underline; }
  457. .select2-result-unselectable .select2-match { text-decoration: none; }
  458. .select2-offscreen { position: absolute; left: -10000px; }