CSS 21
Select2.min.css Guest on 23rd October 2020 06:03:52 AM
  1. .select2-container {
  2.   box-sizing: border-box;
  3.   display: inline-block;
  4.   margin: 0;
  5.   position: relative;
  6.   vertical-align: middle; }
  7.   .select2-container .select2-selection--single {
  8.     box-sizing: border-box;
  9.     cursor: pointer;
  10.     display: block;
  11.     height: 28px;
  12.     user-select: none;
  13.     -webkit-user-select: none; }
  14.     .select2-container .select2-selection--single .select2-selection__rendered {
  15.       display: block;
  16.       padding-left: 8px;
  17.       padding-right: 20px;
  18.       overflow: hidden;
  19.       text-overflow: ellipsis;
  20.       white-space: nowrap; }
  21.   .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
  22.     padding-right: 8px;
  23.     padding-left: 20px; }
  24.   .select2-container .select2-selection--multiple {
  25.     box-sizing: border-box;
  26.     cursor: pointer;
  27.     display: block;
  28.     min-height: 32px;
  29.     user-select: none;
  30.     -webkit-user-select: none; }
  31.     .select2-container .select2-selection--multiple .select2-selection__rendered {
  32.       display: inline-block;
  33.       overflow: hidden;
  34.       padding-left: 8px;
  35.       text-overflow: ellipsis;
  36.       white-space: nowrap; }
  37.   .select2-container .select2-search--inline {
  38.     float: left; }
  39.     .select2-container .select2-search--inline .select2-search__field {
  40.       box-sizing: border-box;
  41.       border: none;
  42.       font-size: 100%;
  43.       margin-top: 5px; }
  44.       .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
  45.         -webkit-appearance: none; }
  46.  
  47. .select2-dropdown {
  48.   background-color: white;
  49.   border: 1px solid #aaa;
  50.   border-radius: 4px;
  51.   box-sizing: border-box;
  52.   display: block;
  53.   position: absolute;
  54.   left: -100000px;
  55.   width: 100%;
  56.   z-index: 1051; }
  57.  
  58. .select2-results {
  59.   display: block; }
  60.  
  61. .select2-results__options {
  62.   list-style: none;
  63.   margin: 0;
  64.   padding: 0; }
  65.  
  66. .select2-results__option {
  67.   padding: 6px;
  68.   user-select: none;
  69.   -webkit-user-select: none; }
  70.   .select2-results__option[aria-selected] {
  71.     cursor: pointer; }
  72.  
  73. .select2-container--open .select2-dropdown {
  74.   left: 0; }
  75.  
  76. .select2-container--open .select2-dropdown--above {
  77.   border-bottom: none;
  78.   border-bottom-left-radius: 0;
  79.   border-bottom-right-radius: 0; }
  80.  
  81. .select2-container--open .select2-dropdown--below {
  82.   border-top: none;
  83.   border-top-left-radius: 0;
  84.   border-top-right-radius: 0; }
  85.  
  86. .select2-search--dropdown {
  87.   display: block;
  88.   padding: 4px; }
  89.   .select2-search--dropdown .select2-search__field {
  90.     padding: 4px;
  91.     width: 100%;
  92.     box-sizing: border-box; }
  93.     .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
  94.       -webkit-appearance: none; }
  95.   .select2-search--dropdown.select2-search--hide {
  96.     display: none; }
  97.  
  98. .select2-close-mask {
  99.   border: 0;
  100.   margin: 0;
  101.   padding: 0;
  102.   display: block;
  103.   position: fixed;
  104.   left: 0;
  105.   top: 0;
  106.   min-height: 100%;
  107.   min-width: 100%;
  108.   height: auto;
  109.   width: auto;
  110.   opacity: 0;
  111.   z-index: 99;
  112.   background-color: #fff;
  113.   filter: alpha(opacity=0); }
  114.  
  115. .select2-container--default .select2-selection--single {
  116.   background-color: #fff;
  117.   border: 1px solid #aaa;
  118.   border-radius: 4px; }
  119.   .select2-container--default .select2-selection--single .select2-selection__rendered {
  120.     color: #444;
  121.     line-height: 28px; }
  122.   .select2-container--default .select2-selection--single .select2-selection__clear {
  123.     cursor: pointer;
  124.     float: right;
  125.     font-weight: bold; }
  126.   .select2-container--default .select2-selection--single .select2-selection__placeholder {
  127.     color: #999; }
  128.   .select2-container--default .select2-selection--single .select2-selection__arrow {
  129.     height: 26px;
  130.     position: absolute;
  131.     top: 1px;
  132.     right: 1px;
  133.     width: 20px; }
  134.     .select2-container--default .select2-selection--single .select2-selection__arrow b {
  135.       border-color: #888 transparent transparent transparent;
  136.       border-style: solid;
  137.       border-width: 5px 4px 0 4px;
  138.       height: 0;
  139.       left: 50%;
  140.       margin-left: -4px;
  141.       margin-top: -2px;
  142.       position: absolute;
  143.       top: 50%;
  144.       width: 0; }
  145. .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
  146.   float: left; }
  147. .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  148.   left: 1px;
  149.   right: auto; }
  150. .select2-container--default.select2-container--disabled .select2-selection--single {
  151.   background-color: #eee;
  152.   cursor: default; }
  153.   .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
  154.     display: none; }
  155. .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  156.   border-color: transparent transparent #888 transparent;
  157.   border-width: 0 4px 5px 4px; }
  158. .select2-container--default .select2-selection--multiple {
  159.   background-color: white;
  160.   border: 1px solid #aaa;
  161.   border-radius: 4px;
  162.   cursor: text; }
  163.   .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  164.     box-sizing: border-box;
  165.     list-style: none;
  166.     margin: 0;
  167.     padding: 0 5px;
  168.     width: 100%; }
  169.   .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  170.     color: #999;
  171.     margin-top: 5px;
  172.     float: left; }
  173.   .select2-container--default .select2-selection--multiple .select2-selection__clear {
  174.     cursor: pointer;
  175.     float: right;
  176.     font-weight: bold;
  177.     margin-top: 5px;
  178.     margin-right: 10px; }
  179.   .select2-container--default .select2-selection--multiple .select2-selection__choice {
  180.     background-color: #e4e4e4;
  181.     border: 1px solid #aaa;
  182.     border-radius: 4px;
  183.     cursor: default;
  184.     float: left;
  185.     margin-right: 5px;
  186.     margin-top: 5px;
  187.     padding: 0 5px; }
  188.   .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  189.     color: #999;
  190.     cursor: pointer;
  191.     display: inline-block;
  192.     font-weight: bold;
  193.     margin-right: 2px; }
  194.     .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  195.       color: #333; }
  196. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder {
  197.   float: right; }
  198. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  199.   margin-left: 5px;
  200.   margin-right: auto; }
  201. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  202.   margin-left: 2px;
  203.   margin-right: auto; }
  204. .select2-container--default.select2-container--focus .select2-selection--multiple {
  205.   border: solid black 1px;
  206.   outline: 0; }
  207. .select2-container--default.select2-container--disabled .select2-selection--multiple {
  208.   background-color: #eee;
  209.   cursor: default; }
  210. .select2-container--default.select2-container--disabled .select2-selection__choice__remove {
  211.   display: none; }
  212. .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
  213.   border-top-left-radius: 0;
  214.   border-top-right-radius: 0; }
  215. .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  216.   border-bottom-left-radius: 0;
  217.   border-bottom-right-radius: 0; }
  218. .select2-container--default .select2-search--dropdown .select2-search__field {
  219.   border: 1px solid #aaa; }
  220. .select2-container--default .select2-search--inline .select2-search__field {
  221.   background: transparent;
  222.   border: none;
  223.   outline: 0; }
  224. .select2-container--default .select2-results > .select2-results__options {
  225.   max-height: 200px;
  226.   overflow-y: auto; }
  227. .select2-container--default .select2-results__option[role=group] {
  228.   padding: 0; }
  229. .select2-container--default .select2-results__option[aria-disabled=true] {
  230.   color: #999; }
  231. .select2-container--default .select2-results__option[aria-selected=true] {
  232.   background-color: #ddd; }
  233. .select2-container--default .select2-results__option .select2-results__option {
  234.   padding-left: 1em; }
  235.   .select2-container--default .select2-results__option .select2-results__option .select2-results__group {
  236.     padding-left: 0; }
  237.   .select2-container--default .select2-results__option .select2-results__option .select2-results__option {
  238.     margin-left: -1em;
  239.     padding-left: 2em; }
  240.     .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  241.       margin-left: -2em;
  242.       padding-left: 3em; }
  243.       .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  244.         margin-left: -3em;
  245.         padding-left: 4em; }
  246.         .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  247.           margin-left: -4em;
  248.           padding-left: 5em; }
  249.           .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  250.             margin-left: -5em;
  251.             padding-left: 6em; }
  252. .select2-container--default .select2-results__option--highlighted[aria-selected] {
  253.   background-color: #5897fb;
  254.   color: white; }
  255. .select2-container--default .select2-results__group {
  256.   cursor: default;
  257.   display: block;
  258.   padding: 6px; }
  259.  
  260. .select2-container--classic .select2-selection--single {
  261.   background-color: #f6f6f6;
  262.   border: 1px solid #aaa;
  263.   border-radius: 4px;
  264.   outline: 0;
  265.   background-image: -webkit-linear-gradient(top, #ffffff 50%, #eeeeee 100%);
  266.   background-image: -o-linear-gradient(top, #ffffff 50%, #eeeeee 100%);
  267.   background-image: linear-gradient(to bottom, #ffffff 50%, #eeeeee 100%);
  268.   background-repeat: repeat-x;
  269.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); }
  270.   .select2-container--classic .select2-selection--single:focus {
  271.     border: 1px solid #5897fb; }
  272.   .select2-container--classic .select2-selection--single .select2-selection__rendered {
  273.     color: #444;
  274.     line-height: 28px; }
  275.   .select2-container--classic .select2-selection--single .select2-selection__clear {
  276.     cursor: pointer;
  277.     float: right;
  278.     font-weight: bold;
  279.     margin-right: 10px; }
  280.   .select2-container--classic .select2-selection--single .select2-selection__placeholder {
  281.     color: #999; }
  282.   .select2-container--classic .select2-selection--single .select2-selection__arrow {
  283.     background-color: #ddd;
  284.     border: none;
  285.     border-left: 1px solid #aaa;
  286.     border-top-right-radius: 4px;
  287.     border-bottom-right-radius: 4px;
  288.     height: 26px;
  289.     position: absolute;
  290.     top: 1px;
  291.     right: 1px;
  292.     width: 20px;
  293.     background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
  294.     background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
  295.     background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
  296.     background-repeat: repeat-x;
  297.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0); }
  298.     .select2-container--classic .select2-selection--single .select2-selection__arrow b {
  299.       border-color: #888 transparent transparent transparent;
  300.       border-style: solid;
  301.       border-width: 5px 4px 0 4px;
  302.       height: 0;
  303.       left: 50%;
  304.       margin-left: -4px;
  305.       margin-top: -2px;
  306.       position: absolute;
  307.       top: 50%;
  308.       width: 0; }
  309. .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
  310.   float: left; }
  311. .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  312.   border: none;
  313.   border-right: 1px solid #aaa;
  314.   border-radius: 0;
  315.   border-top-left-radius: 4px;
  316.   border-bottom-left-radius: 4px;
  317.   left: 1px;
  318.   right: auto; }
  319. .select2-container--classic.select2-container--open .select2-selection--single {
  320.   border: 1px solid #5897fb; }
  321.   .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
  322.     background: transparent;
  323.     border: none; }
  324.     .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
  325.       border-color: transparent transparent #888 transparent;
  326.       border-width: 0 4px 5px 4px; }
  327. .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
  328.   border-top: none;
  329.   border-top-left-radius: 0;
  330.   border-top-right-radius: 0;
  331.   background-image: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee 50%);
  332.   background-image: -o-linear-gradient(top, #ffffff 0%, #eeeeee 50%);
  333.   background-image: linear-gradient(to bottom, #ffffff 0%, #eeeeee 50%);
  334.   background-repeat: repeat-x;
  335.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); }
  336. .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
  337.   border-bottom: none;
  338.   border-bottom-left-radius: 0;
  339.   border-bottom-right-radius: 0;
  340.   background-image: -webkit-linear-gradient(top, #eeeeee 50%, #ffffff 100%);
  341.   background-image: -o-linear-gradient(top, #eeeeee 50%, #ffffff 100%);
  342.   background-image: linear-gradient(to bottom, #eeeeee 50%, #ffffff 100%);
  343.   background-repeat: repeat-x;
  344.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); }
  345. .select2-container--classic .select2-selection--multiple {
  346.   background-color: white;
  347.   border: 1px solid #aaa;
  348.   border-radius: 4px;
  349.   cursor: text;
  350.   outline: 0; }
  351.   .select2-container--classic .select2-selection--multiple:focus {
  352.     border: 1px solid #5897fb; }
  353.   .select2-container--classic .select2-selection--multiple .select2-selection__rendered {
  354.     list-style: none;
  355.     margin: 0;
  356.     padding: 0 5px; }
  357.   .select2-container--classic .select2-selection--multiple .select2-selection__clear {
  358.     display: none; }
  359.   .select2-container--classic .select2-selection--multiple .select2-selection__choice {
  360.     background-color: #e4e4e4;
  361.     border: 1px solid #aaa;
  362.     border-radius: 4px;
  363.     cursor: default;
  364.     float: left;
  365.     margin-right: 5px;
  366.     margin-top: 5px;
  367.     padding: 0 5px; }
  368.   .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
  369.     color: #888;
  370.     cursor: pointer;
  371.     display: inline-block;
  372.     font-weight: bold;
  373.     margin-right: 2px; }
  374.     .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
  375.       color: #555; }
  376. .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  377.   float: right; }
  378. .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  379.   margin-left: 5px;
  380.   margin-right: auto; }
  381. .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  382.   margin-left: 2px;
  383.   margin-right: auto; }
  384. .select2-container--classic.select2-container--open .select2-selection--multiple {
  385.   border: 1px solid #5897fb; }
  386. .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
  387.   border-top: none;
  388.   border-top-left-radius: 0;
  389.   border-top-right-radius: 0; }
  390. .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
  391.   border-bottom: none;
  392.   border-bottom-left-radius: 0;
  393.   border-bottom-right-radius: 0; }
  394. .select2-container--classic .select2-search--dropdown .select2-search__field {
  395.   border: 1px solid #aaa;
  396.   outline: 0; }
  397. .select2-container--classic .select2-search--inline .select2-search__field {
  398.   outline: 0; }
  399. .select2-container--classic .select2-dropdown {
  400.   background-color: white;
  401.   border: 1px solid transparent; }
  402. .select2-container--classic .select2-dropdown--above {
  403.   border-bottom: none; }
  404. .select2-container--classic .select2-dropdown--below {
  405.   border-top: none; }
  406. .select2-container--classic .select2-results > .select2-results__options {
  407.   max-height: 200px;
  408.   overflow-y: auto; }
  409. .select2-container--classic .select2-results__option[role=group] {
  410.   padding: 0; }
  411. .select2-container--classic .select2-results__option[aria-disabled=true] {
  412.   color: grey; }
  413. .select2-container--classic .select2-results__option--highlighted[aria-selected] {
  414.   background-color: #3875d7;
  415.   color: white; }
  416. .select2-container--classic .select2-results__group {
  417.   cursor: default;
  418.   display: block;
  419.   padding: 6px; }
  420. .select2-container--classic.select2-container--open .select2-dropdown {
  421.   border-color: #5897fb; }

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

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