select2.css 17 KB

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