You are here

Home » API reference » Select 2 8

select2.claro.css in Select 2 8 

.select2-container--claro{
}
.select2-container--claro .select2-selection--single{
  background-color:#fff;
  border:1px solid #aaa;
  border-radius:4px;
}
.select2-container--claro .select2-selection--single .select2-selection__rendered{
  color:#444;
  line-height:28px;
}
.select2-container--claro .select2-selection--single .select2-selection__clear{
  cursor:pointer;
  float:right;
  font-weight:bold;
}
.select2-container--claro .select2-selection--single .select2-selection__placeholder{
  color:#999;
}
.select2-container--claro .select2-selection--single .select2-selection__arrow{
  height:26px;
  position:absolute;
  top:1px;
  right:1px;
  width:20px;
}
.select2-container--claro .select2-selection--single .select2-selection__arrow b{
  border-color:#888 transparent transparent transparent;
  border-style:solid;
  border-width:5px 4px 0 4px;
  height:0;
  left:50%;
  margin-left:-4px;
  margin-top:-2px;
  position:absolute;
  top:50%;
  width:0;
}
.select2-container--claro[dir=rtl] .select2-selection--single .select2-selection__clear{
  float:left;
}
.select2-container--claro[dir=rtl] .select2-selection--single .select2-selection__arrow{
  left:1px;
  right:auto;
}
.select2-container--claro.select2-container--disabled .select2-selection--single{
  background-color:#eee;
  cursor:default;
}
.select2-container--claro.select2-container--disabled .select2-selection--single .select2-selection__clear{
  display:none;
}
.select2-container--claro.select2-container--open .select2-selection--single .select2-selection__arrow b{
  border-color:transparent transparent #888 transparent;
  border-width:0 4px 5px 4px;
}
.select2-container--claro .select2-selection--multiple{
  background-color:white;
  border:1px solid #aaa;
  border-radius:4px;
  cursor:text;
}
.select2-container--claro .select2-selection--multiple .select2-selection__rendered{
  box-sizing:border-box;
  list-style:none;
  margin:0;
  padding:0 5px;
  width:100%;
}
.select2-container--claro .select2-selection--multiple .select2-selection__rendered li{
  list-style:none;
}
.select2-container--claro .select2-selection--multiple .select2-selection__clear{
  cursor:pointer;
  float:right;
  font-weight:bold;
  margin-top:5px;
  margin-right:10px;
  padding:1px;
}
.select2-container--claro .select2-selection--multiple .select2-selection__choice{
  background-color:#e4e4e4;
  border:1px solid #aaa;
  border-radius:4px;
  cursor:default;
  float:left;
  margin-right:5px;
  margin-top:5px;
  padding:0 5px;
}
.select2-container--claro .select2-selection--multiple .select2-selection__choice__remove{
  color:#999;
  cursor:pointer;
  display:inline-block;
  font-weight:bold;
  margin-right:2px;
}
.select2-container--claro .select2-selection--multiple .select2-selection__choice__remove:hover{
  color:#333;
}
.select2-container--claro[dir=rtl] .select2-selection--multiple .select2-selection__choice, .select2-container--claro[dir=rtl] .select2-selection--multiple .select2-search--inline{
  float:right;
}
.select2-container--claro[dir=rtl] .select2-selection--multiple .select2-selection__choice{
  margin-left:5px;
  margin-right:auto;
}
.select2-container--claro[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{
  margin-left:2px;
  margin-right:auto;
}
.select2-container--claro.select2-container--focus .select2-selection--multiple{
  border:solid black 1px;
  outline:0;
}
.select2-container--claro.select2-container--disabled .select2-selection--multiple{
  background-color:#eee;
  cursor:default;
}
.select2-container--claro.select2-container--disabled .select2-selection__choice__remove{
  display:none;
}
.select2-container--claro.select2-container--open.select2-container--above .select2-selection--single, .select2-container--claro.select2-container--open.select2-container--above .select2-selection--multiple{
  border-top-left-radius:0;
  border-top-right-radius:0;
}
.select2-container--claro.select2-container--open.select2-container--below .select2-selection--single, .select2-container--claro.select2-container--open.select2-container--below .select2-selection--multiple{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
.select2-container--claro .select2-search--dropdown .select2-search__field{
  border:1px solid #aaa;
}
.select2-container--claro .select2-search--inline .select2-search__field{
  background:transparent;
  border:none;
  outline:0;
  box-shadow:none;
  -webkit-appearance:textfield;
}
.select2-container--claro .select2-results > .select2-results__options{
  max-height:200px;
  overflow-y:auto;
}
.select2-container--claro .select2-results__option[role=group]{
  padding:0;
}
.select2-container--claro .select2-results__option[aria-disabled=true]{
  color:#999;
}
.select2-container--claro .select2-results__option[aria-selected=true]{
  background-color:#ddd;
}
.select2-container--claro .select2-results__option .select2-results__option{
  padding-left:1em;
}
.select2-container--claro .select2-results__option .select2-results__option .select2-results__group{
  padding-left:0;
}
.select2-container--claro .select2-results__option .select2-results__option .select2-results__option{
  margin-left:-1em;
  padding-left:2em;
}
.select2-container--claro .select2-results__option .select2-results__option .select2-results__option .select2-results__option{
  margin-left:-2em;
  padding-left:3em;
}
.select2-container--claro .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{
  margin-left:-3em;
  padding-left:4em;
}
.select2-container--claro .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{
  margin-left:-4em;
  padding-left:5em;
}
.select2-container--claro .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{
  margin-left:-5em;
  padding-left:6em;
}
.select2-container--claro .select2-results__option--highlighted[aria-selected]{
  background-color:#5897fb;
  color:white;
}
.select2-container--claro .select2-results__group{
  cursor:default;
  display:block;
  padding:6px;
}
.ui-widget-overlay + .select2-container--claro{
  z-index:1260;
}

.select2-container--claro{
  border-radius:0.125rem;
}
.select2-container--claro .select2-selection{
  border:1px solid #8e929c;
  border-radius:0.125rem;
}
.select2-container--claro .select2-selection--multiple{
}
.select2-container--claro .select2-selection--multiple .select2-selection__rendered{
  display:block;
  padding:0 0.5rem;
}
.select2-container--claro .select2-selection--multiple .select2-search--inline{
  box-sizing:border-box;
  color:var(--colorGinText);
  min-height:3rem;
  padding:calc(0.75rem - 1px) 0;
  line-height:1.5rem;
}
.select2-container--claro .select2-selection--multiple .select2-search--inline .select2-search__field{
  margin-top:0;
}
.select2-container--claro .select2-selection--multiple .select2-selection__choice{
  background-color:#e9ecf1;
  border:1px solid transparent !important;
  border-radius:1.5rem;
  font-size:0.889rem;
  font-weight:700;
  line-height:1rem;
  margin-top:0.5rem;
  margin-right:0.5rem;
  padding:calc(0.5rem - 1px);
}
[dir=rtl] .select2-container--claro .select2-selection--multiple .select2-selection__choice{
  margin:5px 0 0 0.35rem;
}
.select2-container--claro .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove{
  float:right;
  border-radius:50%;
  color:#e9ecf1;
  font-size:0;
  margin-right:0;
  margin-left:0.35rem;
  width:1rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28px' height='28px' viewBox='0 0 28 28'%3E%3Cpath stroke='%23D4D4D8' stroke-width='4' d='M19,9L9,19'/%3E%3Cpath stroke='%23D4D4D8' stroke-width='4 ' d='M19,19L9,9'/%3E%3C/svg%3E%0A") 50% 50%/100% 100% no-repeat;
  background-color:#999aa3;
}
.select2-container--claro .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover{
  background-color:#222330;
  color:#e9ecf1;
}
.select2-container--claro .select2-selection--single{
  min-height:3rem;
  padding:calc(0.75rem - 1px) calc(1rem - 1px);
}
.select2-container--claro .select2-selection--single .select2-selection__rendered{
  color:#222330;
  padding-left:0;
  padding-right:12px;
  line-height:1.5rem;
}
.select2-container--claro .select2-selection--single .select2-selection__arrow{
  min-height:3rem;
  width:25px;
}
.select2-container--claro .select2-selection--single .select2-selection__arrow b{
  border-color:#222330 transparent transparent transparent;
}
.select2-container--claro.select2-container--open .select2-selection--single .select2-selection__arrow b{
  border-color:transparent transparent #222330 transparent;
}
.select2-container--claro.select2-container--focus .select2-selection--multiple{
  border:1px solid #222330;
}
.select2-container--claro .select2-search__field:focus{
  box-shadow:none;
}
.select2-container--claro .select2-search--dropdown .select2-search__field{
  min-height:3rem;
  padding:calc(0.75rem - 1px) calc(1rem - 1px);
  border-color:#003cc5;
  border-radius:0.125rem;
}
.select2-container--claro .select2-search--dropdown .select2-search__field:hover,
.select2-container--claro .select2-selection:hover{
  border-color:#222330;
  box-shadow:inset 0 0 0 1px #222330;
}
.select2-container--claro .select2-search--dropdown .select2-search__field:focus, .select2-container--claro.select2-container--focus{
  box-shadow:0 0 0 2px #fff, 0 0 0 5px #26a769;
  outline:0;
}
.select2-container--claro .select2-search--dropdown .select2-search__field:hover:focus{
  box-shadow:0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
}
.select2-container--claro .select2-results__option{
  box-sizing:border-box;
  min-height:3rem;
  padding:calc(0.75rem - 1px) calc(1rem - 1px);
}
.select2-container--claro .select2-results__option[aria-selected=true]{
  background-color:#e9ecf1;
}
.select2-container--claro .select2-results__option--highlighted[aria-selected]{
  background-color:#003cc5;
  color:#fff;
}

File

css/select2.claro.css
View source 
  1. .select2-container--claro{

  2. }

  3. .select2-container--claro .select2-selection--single{

  4.   background-color:#fff;

  5.   border:1px solid #aaa;

  6.   border-radius:4px;

  7. }

  8. .select2-container--claro .select2-selection--single .select2-selection__rendered{

  9.   color:#444;

  10.   line-height:28px;

  11. }

  12. .select2-container--claro .select2-selection--single .select2-selection__clear{

  13.   cursor:pointer;

  14.   float:right;

  15.   font-weight:bold;

  16. }

  17. .select2-container--claro .select2-selection--single .select2-selection__placeholder{

  18.   color:#999;

  19. }

  20. .select2-container--claro .select2-selection--single .select2-selection__arrow{

  21.   height:26px;

  22.   position:absolute;

  23.   top:1px;

  24.   right:1px;

  25.   width:20px;

  26. }

  27. .select2-container--claro .select2-selection--single .select2-selection__arrow b{

  28.   border-color:#888 transparent transparent transparent;

  29.   border-style:solid;

  30.   border-width:5px 4px 0 4px;

  31.   height:0;

  32.   left:50%;

  33.   margin-left:-4px;

  34.   margin-top:-2px;

  35.   position:absolute;

  36.   top:50%;

  37.   width:0;

  38. }

  39. .select2-container--claro[dir=rtl] .select2-selection--single .select2-selection__clear{

  40.   float:left;

  41. }

  42. .select2-container--claro[dir=rtl] .select2-selection--single .select2-selection__arrow{

  43.   left:1px;

  44.   right:auto;

  45. }

  46. .select2-container--claro.select2-container--disabled .select2-selection--single{

  47.   background-color:#eee;

  48.   cursor:default;

  49. }

  50. .select2-container--claro.select2-container--disabled .select2-selection--single .select2-selection__clear{

  51.   display:none;

  52. }

  53. .select2-container--claro.select2-container--open .select2-selection--single .select2-selection__arrow b{

  54.   border-color:transparent transparent #888 transparent;

  55.   border-width:0 4px 5px 4px;

  56. }

  57. .select2-container--claro .select2-selection--multiple{

  58.   background-color:white;

  59.   border:1px solid #aaa;

  60.   border-radius:4px;

  61.   cursor:text;

  62. }

  63. .select2-container--claro .select2-selection--multiple .select2-selection__rendered{

  64.   box-sizing:border-box;

  65.   list-style:none;

  66.   margin:0;

  67.   padding:0 5px;

  68.   width:100%;

  69. }

  70. .select2-container--claro .select2-selection--multiple .select2-selection__rendered li{

  71.   list-style:none;

  72. }

  73. .select2-container--claro .select2-selection--multiple .select2-selection__clear{

  74.   cursor:pointer;

  75.   float:right;

  76.   font-weight:bold;

  77.   margin-top:5px;

  78.   margin-right:10px;

  79.   padding:1px;

  80. }

  81. .select2-container--claro .select2-selection--multiple .select2-selection__choice{

  82.   background-color:#e4e4e4;

  83.   border:1px solid #aaa;

  84.   border-radius:4px;

  85.   cursor:default;

  86.   float:left;

  87.   margin-right:5px;

  88.   margin-top:5px;

  89.   padding:0 5px;

  90. }

  91. .select2-container--claro .select2-selection--multiple .select2-selection__choice__remove{

  92.   color:#999;

  93.   cursor:pointer;

  94.   display:inline-block;

  95.   font-weight:bold;

  96.   margin-right:2px;

  97. }

  98. .select2-container--claro .select2-selection--multiple .select2-selection__choice__remove:hover{

  99.   color:#333;

  100. }

  101. .select2-container--claro[dir=rtl] .select2-selection--multiple .select2-selection__choice, .select2-container--claro[dir=rtl] .select2-selection--multiple .select2-search--inline{

  102.   float:right;

  103. }

  104. .select2-container--claro[dir=rtl] .select2-selection--multiple .select2-selection__choice{

  105.   margin-left:5px;

  106.   margin-right:auto;

  107. }

  108. .select2-container--claro[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{

  109.   margin-left:2px;

  110.   margin-right:auto;

  111. }

  112. .select2-container--claro.select2-container--focus .select2-selection--multiple{

  113.   border:solid black 1px;

  114.   outline:0;

  115. }

  116. .select2-container--claro.select2-container--disabled .select2-selection--multiple{

  117.   background-color:#eee;

  118.   cursor:default;

  119. }

  120. .select2-container--claro.select2-container--disabled .select2-selection__choice__remove{

  121.   display:none;

  122. }

  123. .select2-container--claro.select2-container--open.select2-container--above .select2-selection--single, .select2-container--claro.select2-container--open.select2-container--above .select2-selection--multiple{

  124.   border-top-left-radius:0;

  125.   border-top-right-radius:0;

  126. }

  127. .select2-container--claro.select2-container--open.select2-container--below .select2-selection--single, .select2-container--claro.select2-container--open.select2-container--below .select2-selection--multiple{

  128.   border-bottom-left-radius:0;

  129.   border-bottom-right-radius:0;

  130. }

  131. .select2-container--claro .select2-search--dropdown .select2-search__field{

  132.   border:1px solid #aaa;

  133. }

  134. .select2-container--claro .select2-search--inline .select2-search__field{

  135.   background:transparent;

  136.   border:none;

  137.   outline:0;

  138.   box-shadow:none;

  139.   -webkit-appearance:textfield;

  140. }

  141. .select2-container--claro .select2-results > .select2-results__options{

  142.   max-height:200px;

  143.   overflow-y:auto;

  144. }

  145. .select2-container--claro .select2-results__option[role=group]{

  146.   padding:0;

  147. }

  148. .select2-container--claro .select2-results__option[aria-disabled=true]{

  149.   color:#999;

  150. }

  151. .select2-container--claro .select2-results__option[aria-selected=true]{

  152.   background-color:#ddd;

  153. }

  154. .select2-container--claro .select2-results__option .select2-results__option{

  155.   padding-left:1em;

  156. }

  157. .select2-container--claro .select2-results__option .select2-results__option .select2-results__group{

  158.   padding-left:0;

  159. }

  160. .select2-container--claro .select2-results__option .select2-results__option .select2-results__option{

  161.   margin-left:-1em;

  162.   padding-left:2em;

  163. }

  164. .select2-container--claro .select2-results__option .select2-results__option .select2-results__option .select2-results__option{

  165.   margin-left:-2em;

  166.   padding-left:3em;

  167. }

  168. .select2-container--claro .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{

  169.   margin-left:-3em;

  170.   padding-left:4em;

  171. }

  172. .select2-container--claro .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{

  173.   margin-left:-4em;

  174.   padding-left:5em;

  175. }

  176. .select2-container--claro .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{

  177.   margin-left:-5em;

  178.   padding-left:6em;

  179. }

  180. .select2-container--claro .select2-results__option--highlighted[aria-selected]{

  181.   background-color:#5897fb;

  182.   color:white;

  183. }

  184. .select2-container--claro .select2-results__group{

  185.   cursor:default;

  186.   display:block;

  187.   padding:6px;

  188. }

  189. .ui-widget-overlay + .select2-container--claro{

  190.   z-index:1260;

  191. }

  192. 

  193. .select2-container--claro{

  194.   border-radius:0.125rem;

  195. }

  196. .select2-container--claro .select2-selection{

  197.   border:1px solid #8e929c;

  198.   border-radius:0.125rem;

  199. }

  200. .select2-container--claro .select2-selection--multiple{

  201. }

  202. .select2-container--claro .select2-selection--multiple .select2-selection__rendered{

  203.   display:block;

  204.   padding:0 0.5rem;

  205. }

  206. .select2-container--claro .select2-selection--multiple .select2-search--inline{

  207.   box-sizing:border-box;

  208.   color:var(--colorGinText);

  209.   min-height:3rem;

  210.   padding:calc(0.75rem - 1px) 0;

  211.   line-height:1.5rem;

  212. }

  213. .select2-container--claro .select2-selection--multiple .select2-search--inline .select2-search__field{

  214.   margin-top:0;

  215. }

  216. .select2-container--claro .select2-selection--multiple .select2-selection__choice{

  217.   background-color:#e9ecf1;

  218.   border:1px solid transparent !important;

  219.   border-radius:1.5rem;

  220.   font-size:0.889rem;

  221.   font-weight:700;

  222.   line-height:1rem;

  223.   margin-top:0.5rem;

  224.   margin-right:0.5rem;

  225.   padding:calc(0.5rem - 1px);

  226. }

  227. [dir=rtl] .select2-container--claro .select2-selection--multiple .select2-selection__choice{

  228.   margin:5px 0 0 0.35rem;

  229. }

  230. .select2-container--claro .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove{

  231.   float:right;

  232.   border-radius:50%;

  233.   color:#e9ecf1;

  234.   font-size:0;

  235.   margin-right:0;

  236.   margin-left:0.35rem;

  237.   width:1rem;

  238.   background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28px' height='28px' viewBox='0 0 28 28'%3E%3Cpath stroke='%23D4D4D8' stroke-width='4' d='M19,9L9,19'/%3E%3Cpath stroke='%23D4D4D8' stroke-width='4 ' d='M19,19L9,9'/%3E%3C/svg%3E%0A") 50% 50%/100% 100% no-repeat;

  239.   background-color:#999aa3;

  240. }

  241. .select2-container--claro .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover{

  242.   background-color:#222330;

  243.   color:#e9ecf1;

  244. }

  245. .select2-container--claro .select2-selection--single{

  246.   min-height:3rem;

  247.   padding:calc(0.75rem - 1px) calc(1rem - 1px);

  248. }

  249. .select2-container--claro .select2-selection--single .select2-selection__rendered{

  250.   color:#222330;

  251.   padding-left:0;

  252.   padding-right:12px;

  253.   line-height:1.5rem;

  254. }

  255. .select2-container--claro .select2-selection--single .select2-selection__arrow{

  256.   min-height:3rem;

  257.   width:25px;

  258. }

  259. .select2-container--claro .select2-selection--single .select2-selection__arrow b{

  260.   border-color:#222330 transparent transparent transparent;

  261. }

  262. .select2-container--claro.select2-container--open .select2-selection--single .select2-selection__arrow b{

  263.   border-color:transparent transparent #222330 transparent;

  264. }

  265. .select2-container--claro.select2-container--focus .select2-selection--multiple{

  266.   border:1px solid #222330;

  267. }

  268. .select2-container--claro .select2-search__field:focus{

  269.   box-shadow:none;

  270. }

  271. .select2-container--claro .select2-search--dropdown .select2-search__field{

  272.   min-height:3rem;

  273.   padding:calc(0.75rem - 1px) calc(1rem - 1px);

  274.   border-color:#003cc5;

  275.   border-radius:0.125rem;

  276. }

  277. .select2-container--claro .select2-search--dropdown .select2-search__field:hover,

  278. .select2-container--claro .select2-selection:hover{

  279.   border-color:#222330;

  280.   box-shadow:inset 0 0 0 1px #222330;

  281. }

  282. .select2-container--claro .select2-search--dropdown .select2-search__field:focus, .select2-container--claro.select2-container--focus{

  283.   box-shadow:0 0 0 2px #fff, 0 0 0 5px #26a769;

  284.   outline:0;

  285. }

  286. .select2-container--claro .select2-search--dropdown .select2-search__field:hover:focus{

  287.   box-shadow:0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;

  288. }

  289. .select2-container--claro .select2-results__option{

  290.   box-sizing:border-box;

  291.   min-height:3rem;

  292.   padding:calc(0.75rem - 1px) calc(1rem - 1px);

  293. }

  294. .select2-container--claro .select2-results__option[aria-selected=true]{

  295.   background-color:#e9ecf1;

  296. }

  297. .select2-container--claro .select2-results__option--highlighted[aria-selected]{

  298.   background-color:#003cc5;

  299.   color:#fff;

  300. }