1
0

select2-bootstrap4.css 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. .select2-container--bootstrap4 .select2-selection--single {
  2. height: calc(2.25rem + 2px) !important; }
  3. .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
  4. color: #757575;
  5. line-height: 2.25rem; }
  6. .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
  7. position: absolute;
  8. top: 50%;
  9. right: 3px;
  10. width: 20px; }
  11. .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
  12. top: 60%;
  13. border-color: #343a40 transparent transparent transparent;
  14. border-style: solid;
  15. border-width: 5px 4px 0 4px;
  16. width: 0;
  17. height: 0;
  18. left: 50%;
  19. margin-left: -4px;
  20. margin-top: -2px;
  21. position: absolute; }
  22. .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  23. line-height: 2.25rem; }
  24. .select2-search--dropdown .select2-search__field {
  25. border: 1px solid #ced4da;
  26. border-radius: 0.25rem; }
  27. .select2-results__message {
  28. color: #6c757d; }
  29. .select2-container--bootstrap4 .select2-selection--multiple {
  30. min-height: calc(2.25rem + 2px) !important; }
  31. .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
  32. -webkit-box-sizing: border-box;
  33. box-sizing: border-box;
  34. list-style: none;
  35. margin: 0;
  36. padding: 0 5px;
  37. width: 100%; }
  38. .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
  39. color: #343a40;
  40. border: 1px solid #bdc6d0;
  41. border-radius: 0.2rem;
  42. padding: 0;
  43. padding-right: 5px;
  44. cursor: pointer;
  45. float: left;
  46. margin-top: 0.3em;
  47. margin-right: 5px; }
  48. .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
  49. color: #bdc6d0;
  50. font-weight: bold;
  51. margin-left: 3px;
  52. margin-right: 1px;
  53. padding-right: 3px;
  54. padding-left: 3px;
  55. float: left; }
  56. .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
  57. color: #343a40; }
  58. .select2-container {
  59. display: block; }
  60. .select2-container *:focus {
  61. outline: 0; }
  62. .input-group .select2-container--bootstrap4 {
  63. -webkit-box-flex: 1;
  64. -ms-flex-positive: 1;
  65. flex-grow: 1; }
  66. .input-group-prepend ~ .select2-container--bootstrap4 .select2-selection {
  67. border-top-left-radius: 0;
  68. border-bottom-left-radius: 0; }
  69. .input-group > .select2-container--bootstrap4:not(:last-child) .select2-selection {
  70. border-top-right-radius: 0;
  71. border-bottom-right-radius: 0; }
  72. .select2-container--bootstrap4 .select2-selection {
  73. background-color: #fff;
  74. border: 1px solid #ced4da;
  75. border-radius: 0.25rem;
  76. -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  77. transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  78. transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  79. transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  80. width: 100%; }
  81. @media screen and (prefers-reduced-motion: reduce) {
  82. .select2-container--bootstrap4 .select2-selection {
  83. -webkit-transition: none;
  84. transition: none; } }
  85. .select2-container--bootstrap4.select2-container--focus .select2-selection {
  86. border-color: #80bdff;
  87. -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  88. box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
  89. .select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection {
  90. border-bottom: none;
  91. border-bottom-left-radius: 0;
  92. border-bottom-right-radius: 0; }
  93. .select2-container--bootstrap4.select2-container--disabled .select2-selection, .select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-selection {
  94. background-color: #e9ecef;
  95. cursor: not-allowed;
  96. border-color: #ced4da;
  97. -webkit-box-shadow: none;
  98. box-shadow: none; }
  99. .select2-container--bootstrap4.select2-container--disabled .select2-search__field, .select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-search__field {
  100. background-color: transparent; }
  101. select.is-invalid ~ .select2-container--bootstrap4 .select2-selection,
  102. form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection {
  103. border-color: #dc3545; }
  104. select.is-valid ~ .select2-container--bootstrap4 .select2-selection,
  105. form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection {
  106. border-color: #28a745; }
  107. .select2-container--bootstrap4 .select2-dropdown {
  108. border-color: #ced4da;
  109. border-top: none;
  110. border-top-left-radius: 0;
  111. border-top-right-radius: 0; }
  112. .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above {
  113. border-top: 1px solid #ced4da;
  114. border-top-left-radius: 0.25rem;
  115. border-top-right-radius: 0.25rem; }
  116. .select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true] {
  117. background-color: #e9ecef; }
  118. .select2-container--bootstrap4 .select2-results__option--highlighted,
  119. .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
  120. background-color: #007bff;
  121. color: #f8f9fa; }
  122. .select2-container--bootstrap4 .select2-results__option[role=group] {
  123. padding: 0; }
  124. .select2-container--bootstrap4 .select2-results > .select2-results__options {
  125. max-height: 15em;
  126. overflow-y: auto; }
  127. .select2-container--bootstrap4 .select2-results__group {
  128. padding: 6px;
  129. display: list-item;
  130. color: #6c757d; }
  131. .select2-container--bootstrap4 .select2-selection__clear {
  132. width: 1.2em;
  133. height: 1.2em;
  134. line-height: 1.15em;
  135. padding-left: 0.3em;
  136. margin-top: 0.5em;
  137. border-radius: 100%;
  138. background-color: #6c757d;
  139. color: #f8f9fa;
  140. float: right;
  141. margin-right: 0.3em; }
  142. .select2-container--bootstrap4 .select2-selection__clear:hover {
  143. background-color: #343a40; }