You are here

Home » API reference » Select 2 8

select2.seven.css in Select 2 8 

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

.select2-container--seven .select2-selection--multiple{
  height:auto;
}

.select2-container--seven .select2-selection--single,
.select2-container--seven .select2-selection--multiple{
  border:1px solid #b8b8b8;
  border-top-color:#999;
  border-radius:2px;
  box-sizing:border-box;
  max-width:100%;
  background:#fcfcfa;
  box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.125);
  font-size:1em;
  color:#595959;
  transition:border linear 0.2s, box-shadow linear 0.2s;
}

.select2-container--seven .select2-selection--multiple .select2-selection__choice{
  background-color:#ebeae4;
  border:1px solid #b8b8b8;
}

.select2-container--seven.select2-container--focus .select2-selection--multiple{
  border:solid #b8b8b8 1px;
}

.select2-container--seven .select2-selection--single .select2-selection__placeholder{
  color:#757575;
}

.select2-container--seven .select2-selection--single .select2-selection__rendered{
  color:#595959;
  padding-left:6px;
  line-height:31px;
}

.select2-container--seven .select2-search--inline .select2-search__field{
  padding-top:3px;
}

.select2-container--seven ul li.select2-results__message{
  color:#595959;
  font-size:0.95em;
}

.select2-container--seven ul li.select2-results__option{
  padding:3px 1em 3px 0.4em;
}

.select2-container--seven .select2-search--dropdown .select2-search__field{
  border:1px solid #b8b8b8;
}

.select2-container--seven .select2-results__option[aria-selected=true]{
  background-color:#ebeae4;
}

.select2-container--seven .select2-results__option--highlighted[aria-selected]{
  background-color:#0074bd;
}
.select2-container--seven .select2-dropdown{
  border-color:#b8b8b8;
  border-radius:2px;
}

.select2-container--seven .select2-dropdown--above{
  border-bottom:1px;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

.select2-container--seven .select2-dropdown--below{
  border-top-left-radius:0;
  border-top-right-radius:0;
}

.select2-container--seven .select2-selection--multiple:focus,
.select2-container--seven .select2-selection--single:focus{
  border-color:#40b6ff;
  outline:0;
  box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px #40b6ff;
  background-color:#fff;
}

.select2-container--seven .select2-selection--multiple .select2-selection__choice{
  white-space:normal;
}
.ui-widget-overlay + .select2-container--seven{
  z-index:1260;
}

File

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

  2. }

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

  4.   background-color:#fff;

  5.   border:1px solid #aaa;

  6.   border-radius:4px;

  7. }

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

  9.   color:#444;

  10.   line-height:28px;

  11. }

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

  13.   cursor:pointer;

  14.   float:right;

  15.   font-weight:bold;

  16. }

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

  18.   color:#999;

  19. }

  20. .select2-container--seven .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--seven .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--seven[dir=rtl] .select2-selection--single .select2-selection__clear{

  40.   float:left;

  41. }

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

  43.   left:1px;

  44.   right:auto;

  45. }

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

  47.   background-color:#eee;

  48.   cursor:default;

  49. }

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

  51.   display:none;

  52. }

  53. .select2-container--seven.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--seven .select2-selection--multiple{

  58.   background-color:white;

  59.   border:1px solid #aaa;

  60.   border-radius:4px;

  61.   cursor:text;

  62. }

  63. .select2-container--seven .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--seven .select2-selection--multiple .select2-selection__rendered li{

  71.   list-style:none;

  72. }

  73. .select2-container--seven .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--seven .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--seven .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--seven .select2-selection--multiple .select2-selection__choice__remove:hover{

  99.   color:#333;

  100. }

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

  102.   float:right;

  103. }

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

  105.   margin-left:5px;

  106.   margin-right:auto;

  107. }

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

  109.   margin-left:2px;

  110.   margin-right:auto;

  111. }

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

  113.   border:solid black 1px;

  114.   outline:0;

  115. }

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

  117.   background-color:#eee;

  118.   cursor:default;

  119. }

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

  121.   display:none;

  122. }

  123. .select2-container--seven.select2-container--open.select2-container--above .select2-selection--single, .select2-container--seven.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--seven.select2-container--open.select2-container--below .select2-selection--single, .select2-container--seven.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--seven .select2-search--dropdown .select2-search__field{

  132.   border:1px solid #aaa;

  133. }

  134. .select2-container--seven .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--seven .select2-results > .select2-results__options{

  142.   max-height:200px;

  143.   overflow-y:auto;

  144. }

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

  146.   padding:0;

  147. }

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

  149.   color:#999;

  150. }

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

  152.   background-color:#ddd;

  153. }

  154. .select2-container--seven .select2-results__option .select2-results__option{

  155.   padding-left:1em;

  156. }

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

  158.   padding-left:0;

  159. }

  160. .select2-container--seven .select2-results__option .select2-results__option .select2-results__option{

  161.   margin-left:-1em;

  162.   padding-left:2em;

  163. }

  164. .select2-container--seven .select2-results__option .select2-results__option .select2-results__option .select2-results__option{

  165.   margin-left:-2em;

  166.   padding-left:3em;

  167. }

  168. .select2-container--seven .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--seven .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--seven .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--seven .select2-results__option--highlighted[aria-selected]{

  181.   background-color:#5897fb;

  182.   color:white;

  183. }

  184. .select2-container--seven .select2-results__group{

  185.   cursor:default;

  186.   display:block;

  187.   padding:6px;

  188. }

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

  190.   z-index:1260;

  191. }

  192. .select2-container--seven .select2-selection--single,

  193. .select2-container--seven .select2-selection--single .select2-selection__arrow{

  194.   height:31px;

  195. }

  196. 

  197. .select2-container--seven .select2-selection--multiple{

  198.   height:auto;

  199. }

  200. 

  201. .select2-container--seven .select2-selection--single,

  202. .select2-container--seven .select2-selection--multiple{

  203.   border:1px solid #b8b8b8;

  204.   border-top-color:#999;

  205.   border-radius:2px;

  206.   box-sizing:border-box;

  207.   max-width:100%;

  208.   background:#fcfcfa;

  209.   box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.125);

  210.   font-size:1em;

  211.   color:#595959;

  212.   transition:border linear 0.2s, box-shadow linear 0.2s;

  213. }

  214. 

  215. .select2-container--seven .select2-selection--multiple .select2-selection__choice{

  216.   background-color:#ebeae4;

  217.   border:1px solid #b8b8b8;

  218. }

  219. 

  220. .select2-container--seven.select2-container--focus .select2-selection--multiple{

  221.   border:solid #b8b8b8 1px;

  222. }

  223. 

  224. .select2-container--seven .select2-selection--single .select2-selection__placeholder{

  225.   color:#757575;

  226. }

  227. 

  228. .select2-container--seven .select2-selection--single .select2-selection__rendered{

  229.   color:#595959;

  230.   padding-left:6px;

  231.   line-height:31px;

  232. }

  233. 

  234. .select2-container--seven .select2-search--inline .select2-search__field{

  235.   padding-top:3px;

  236. }

  237. 

  238. .select2-container--seven ul li.select2-results__message{

  239.   color:#595959;

  240.   font-size:0.95em;

  241. }

  242. 

  243. .select2-container--seven ul li.select2-results__option{

  244.   padding:3px 1em 3px 0.4em;

  245. }

  246. 

  247. .select2-container--seven .select2-search--dropdown .select2-search__field{

  248.   border:1px solid #b8b8b8;

  249. }

  250. 

  251. .select2-container--seven .select2-results__option[aria-selected=true]{

  252.   background-color:#ebeae4;

  253. }

  254. 

  255. .select2-container--seven .select2-results__option--highlighted[aria-selected]{

  256.   background-color:#0074bd;

  257. }

  258. .select2-container--seven .select2-dropdown{

  259.   border-color:#b8b8b8;

  260.   border-radius:2px;

  261. }

  262. 

  263. .select2-container--seven .select2-dropdown--above{

  264.   border-bottom:1px;

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

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

  267. }

  268. 

  269. .select2-container--seven .select2-dropdown--below{

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

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

  272. }

  273. 

  274. .select2-container--seven .select2-selection--multiple:focus,

  275. .select2-container--seven .select2-selection--single:focus{

  276.   border-color:#40b6ff;

  277.   outline:0;

  278.   box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px #40b6ff;

  279.   background-color:#fff;

  280. }

  281. 

  282. .select2-container--seven .select2-selection--multiple .select2-selection__choice{

  283.   white-space:normal;

  284. }

  285. .ui-widget-overlay + .select2-container--seven{

  286.   z-index:1260;

  287. }