CSS   9

select2.css

Guest on 23rd July 2021 01:53:51 AM

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

Raw Paste


Login or Register to edit or fork this paste. It's free.