CSS   16

bootstrap-select css

Guest on 21st July 2022 01:23:16 PM

  1. /*!
  2.  * Bootstrap-select v1.13.2 (https://developer.snapappointments.com/bootstrap-select)
  3.  *
  4.  * Copyright  SnapAppointments, LLC
  5.  * Licensed under MIT (https://github.com/snapappointments/bootstrap-select/blob/master/LICENSE)
  6.  */
  7.  
  8. select.bs-select-hidden,
  9. .bootstrap-select > select.bs-select-hidden,
  10. select.selectpicker {
  11.   display: none !important;
  12. }
  13. .bootstrap-select {
  14.   width: 220px \0;
  15.   /*IE9 and below*/
  16. }
  17. .bootstrap-select > .dropdown-toggle {
  18.   position: relative;
  19.   width: 100%;
  20.   z-index: 1;
  21.   text-align: right;
  22.   white-space: nowrap;
  23. }
  24. .bootstrap-select > .dropdown-toggle.bs-placeholder,
  25. .bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
  26. .bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
  27. .bootstrap-select > .dropdown-toggle.bs-placeholder:active {
  28.   color: #999;
  29. }
  30. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary,
  31. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary,
  32. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success,
  33. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger,
  34. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info,
  35. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark,
  36. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary:hover,
  37. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary:hover,
  38. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success:hover,
  39. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger:hover,
  40. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info:hover,
  41. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark:hover,
  42. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary:focus,
  43. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary:focus,
  44. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success:focus,
  45. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger:focus,
  46. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info:focus,
  47. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark:focus,
  48. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary:active,
  49. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary:active,
  50. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success:active,
  51. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger:active,
  52. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info:active,
  53. .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark:active {
  54.   color: rgba(255, 255, 255, 0.5);
  55. }
  56. .bootstrap-select > select {
  57.   position: absolute !important;
  58.   bottom: 0;
  59.   left: 50%;
  60.   display: block !important;
  61.   width: 0.5px !important;
  62.   height: 100% !important;
  63.   padding: 0 !important;
  64.   opacity: 0 !important;
  65.   border: none;
  66. }
  67. .bootstrap-select > select.mobile-device {
  68.   top: 0;
  69.   left: 0;
  70.   display: block !important;
  71.   width: 100% !important;
  72.   z-index: 2;
  73. }
  74. .has-error .bootstrap-select .dropdown-toggle,
  75. .error .bootstrap-select .dropdown-toggle,
  76. .bootstrap-select.is-invalid .dropdown-toggle,
  77. .was-validated .bootstrap-select .selectpicker:invalid + .dropdown-toggle {
  78.   border-color: #b94a48;
  79. }
  80. .bootstrap-select.is-valid .dropdown-toggle,
  81. .was-validated .bootstrap-select .selectpicker:valid + .dropdown-toggle {
  82.   border-color: #28a745;
  83. }
  84. .bootstrap-select.fit-width {
  85.   width: auto !important;
  86. }
  87. .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  88.   width: 220px;
  89. }
  90. .bootstrap-select .dropdown-toggle:focus {
  91.   outline: thin dotted #333333 !important;
  92.   outline: 5px auto -webkit-focus-ring-color !important;
  93.   outline-offset: -2px;
  94. }
  95. .bootstrap-select.form-control {
  96.   margin-bottom: 0;
  97.   padding: 0;
  98.   border: none;
  99. }
  100. :not(.input-group) > .bootstrap-select.form-control:not([class*="col-"]) {
  101.   width: 100%;
  102. }
  103. .bootstrap-select.form-control.input-group-btn {
  104.   z-index: auto;
  105. }
  106. .bootstrap-select.form-control.input-group-btn:not(:first-child):not(:last-child) > .btn {
  107.   border-radius: 0;
  108. }
  109. .bootstrap-select:not(.input-group-btn),
  110. .bootstrap-select[class*="col-"] {
  111.   float: none;
  112.   display: inline-block;
  113.   margin-left: 0;
  114. }
  115. .bootstrap-select.dropdown-menu-right,
  116. .bootstrap-select[class*="col-"].dropdown-menu-right,
  117. .row .bootstrap-select[class*="col-"].dropdown-menu-right {
  118.   float: right;
  119. }
  120. .form-inline .bootstrap-select,
  121. .form-horizontal .bootstrap-select,
  122. .form-group .bootstrap-select {
  123.   margin-bottom: 0;
  124. }
  125. .form-group-lg .bootstrap-select.form-control,
  126. .form-group-sm .bootstrap-select.form-control {
  127.   padding: 0;
  128. }
  129. .form-group-lg .bootstrap-select.form-control .dropdown-toggle,
  130. .form-group-sm .bootstrap-select.form-control .dropdown-toggle {
  131.   height: 100%;
  132.   font-size: inherit;
  133.   line-height: inherit;
  134.   border-radius: inherit;
  135. }
  136. .bootstrap-select.form-control-sm .dropdown-toggle,
  137. .bootstrap-select.form-control-lg .dropdown-toggle {
  138.   font-size: inherit;
  139.   line-height: inherit;
  140.   border-radius: inherit;
  141. }
  142. .bootstrap-select.form-control-sm .dropdown-toggle {
  143.   padding: 0.25rem 0.5rem;
  144. }
  145. .bootstrap-select.form-control-lg .dropdown-toggle {
  146.   padding: 0.5rem 1rem;
  147. }
  148. .form-inline .bootstrap-select .form-control {
  149.   width: 100%;
  150. }
  151. .bootstrap-select.disabled,
  152. .bootstrap-select > .disabled {
  153.   cursor: not-allowed;
  154. }
  155. .bootstrap-select.disabled:focus,
  156. .bootstrap-select > .disabled:focus {
  157.   outline: none !important;
  158. }
  159. .bootstrap-select.bs-container {
  160.   position: absolute;
  161.   top: 0;
  162.   left: 0;
  163.   height: 0 !important;
  164.   padding: 0 !important;
  165. }
  166. .bootstrap-select.bs-container .dropdown-menu {
  167.   z-index: 1060;
  168. }
  169. .bootstrap-select .dropdown-toggle:before {
  170.   content: '';
  171.   display: inline-block;
  172. }
  173. .bootstrap-select .dropdown-toggle .filter-option {
  174.   position: absolute;
  175.   top: 0;
  176.   left: 0;
  177.   padding-top: inherit;
  178.   padding-right: inherit;
  179.   padding-bottom: inherit;
  180.   padding-left: inherit;
  181.   height: 100%;
  182.   width: 100%;
  183.   text-align: left;
  184. }
  185. .bootstrap-select .dropdown-toggle .filter-option-inner {
  186.   padding-right: inherit;
  187. }
  188. .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  189.   overflow: hidden;
  190. }
  191. .bootstrap-select .dropdown-toggle .caret {
  192.   position: absolute;
  193.   top: 50%;
  194.   right: 12px;
  195.   margin-top: -2px;
  196.   vertical-align: middle;
  197. }
  198. .input-group .bootstrap-select.form-control .dropdown-toggle {
  199.   border-radius: inherit;
  200. }
  201. .bootstrap-select[class*="col-"] .dropdown-toggle {
  202.   width: 100%;
  203. }
  204. .bootstrap-select .dropdown-menu {
  205.   min-width: 100%;
  206.   -webkit-box-sizing: border-box;
  207.      -moz-box-sizing: border-box;
  208.           box-sizing: border-box;
  209. }
  210. .bootstrap-select .dropdown-menu > .inner:focus {
  211.   outline: none !important;
  212. }
  213. .bootstrap-select .dropdown-menu.inner {
  214.   position: static;
  215.   float: none;
  216.   border: 0;
  217.   padding: 0;
  218.   margin: 0;
  219.   border-radius: 0;
  220.   -webkit-box-shadow: none;
  221.           box-shadow: none;
  222. }
  223. .bootstrap-select .dropdown-menu li {
  224.   position: relative;
  225. }
  226. .bootstrap-select .dropdown-menu li.active small {
  227.   color: rgba(255, 255, 255, 0.5) !important;
  228. }
  229. .bootstrap-select .dropdown-menu li.disabled a {
  230.   cursor: not-allowed;
  231. }
  232. .bootstrap-select .dropdown-menu li a {
  233.   cursor: pointer;
  234.   -webkit-user-select: none;
  235.      -moz-user-select: none;
  236.       -ms-user-select: none;
  237.           user-select: none;
  238. }
  239. .bootstrap-select .dropdown-menu li a.opt {
  240.   position: relative;
  241.   padding-left: 2.25em;
  242. }
  243. .bootstrap-select .dropdown-menu li a span.check-mark {
  244.   display: none;
  245. }
  246. .bootstrap-select .dropdown-menu li a span.text {
  247.   display: inline-block;
  248. }
  249. .bootstrap-select .dropdown-menu li small {
  250.   padding-left: 0.5em;
  251. }
  252. .bootstrap-select .dropdown-menu .notify {
  253.   position: absolute;
  254.   bottom: 5px;
  255.   width: 96%;
  256.   margin: 0 2%;
  257.   min-height: 26px;
  258.   padding: 3px 5px;
  259.   background: #f5f5f5;
  260.   border: 1px solid #e3e3e3;
  261.   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  262.           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  263.   pointer-events: none;
  264.   opacity: 0.9;
  265.   -webkit-box-sizing: border-box;
  266.      -moz-box-sizing: border-box;
  267.           box-sizing: border-box;
  268. }
  269. .bootstrap-select .no-results {
  270.   padding: 3px;
  271.   background: #f5f5f5;
  272.   margin: 0 5px;
  273.   white-space: nowrap;
  274. }
  275. .bootstrap-select.fit-width .dropdown-toggle .filter-option {
  276.   position: static;
  277.   display: inline;
  278.   padding: 0;
  279. }
  280. .bootstrap-select.fit-width .dropdown-toggle .filter-option-inner,
  281. .bootstrap-select.fit-width .dropdown-toggle .filter-option-inner-inner {
  282.   display: inline;
  283. }
  284. .bootstrap-select.fit-width .dropdown-toggle .caret {
  285.   position: static;
  286.   top: auto;
  287.   margin-top: -1px;
  288. }
  289. .bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
  290.   position: absolute;
  291.   display: inline-block;
  292.   right: 15px;
  293.   top: 5px;
  294. }
  295. .bootstrap-select.show-tick .dropdown-menu li a span.text {
  296.   margin-right: 34px;
  297. }
  298. .bootstrap-select .bs-ok-default:after {
  299.   content: '';
  300.   display: block;
  301.   width: 0.5em;
  302.   height: 1em;
  303.   border-style: solid;
  304.   border-width: 0 0.26em 0.26em 0;
  305.   -webkit-transform: rotate(45deg);
  306.       -ms-transform: rotate(45deg);
  307.        -o-transform: rotate(45deg);
  308.           transform: rotate(45deg);
  309. }
  310. .bootstrap-select.show-menu-arrow.open > .dropdown-toggle,
  311. .bootstrap-select.show-menu-arrow.show > .dropdown-toggle {
  312.   z-index: 1061;
  313. }
  314. .bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:before {
  315.   content: '';
  316.   border-left: 7px solid transparent;
  317.   border-right: 7px solid transparent;
  318.   border-bottom: 7px solid rgba(204, 204, 204, 0.2);
  319.   position: absolute;
  320.   bottom: -4px;
  321.   left: 9px;
  322.   display: none;
  323. }
  324. .bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:after {
  325.   content: '';
  326.   border-left: 6px solid transparent;
  327.   border-right: 6px solid transparent;
  328.   border-bottom: 6px solid white;
  329.   position: absolute;
  330.   bottom: -4px;
  331.   left: 10px;
  332.   display: none;
  333. }
  334. .bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:before {
  335.   bottom: auto;
  336.   top: -4px;
  337.   border-top: 7px solid rgba(204, 204, 204, 0.2);
  338.   border-bottom: 0;
  339. }
  340. .bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:after {
  341.   bottom: auto;
  342.   top: -4px;
  343.   border-top: 6px solid white;
  344.   border-bottom: 0;
  345. }
  346. .bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:before {
  347.   right: 12px;
  348.   left: auto;
  349. }
  350. .bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:after {
  351.   right: 13px;
  352.   left: auto;
  353. }
  354. .bootstrap-select.show-menu-arrow.open > .dropdown-toggle .filter-option:before,
  355. .bootstrap-select.show-menu-arrow.show > .dropdown-toggle .filter-option:before,
  356. .bootstrap-select.show-menu-arrow.open > .dropdown-toggle .filter-option:after,
  357. .bootstrap-select.show-menu-arrow.show > .dropdown-toggle .filter-option:after {
  358.   display: block;
  359. }
  360. .bs-searchbox,
  361. .bs-actionsbox,
  362. .bs-donebutton {
  363.   padding: 4px 8px;
  364. }
  365. .bs-actionsbox {
  366.   width: 100%;
  367.   -webkit-box-sizing: border-box;
  368.      -moz-box-sizing: border-box;
  369.           box-sizing: border-box;
  370. }
  371. .bs-actionsbox .btn-group button {
  372.   width: 50%;
  373. }
  374. .bs-donebutton {
  375.   float: left;
  376.   width: 100%;
  377.   -webkit-box-sizing: border-box;
  378.      -moz-box-sizing: border-box;
  379.           box-sizing: border-box;
  380. }
  381. .bs-donebutton .btn-group button {
  382.   width: 100%;
  383. }
  384. .bs-searchbox + .bs-actionsbox {
  385.   padding: 0 8px 4px;
  386. }
  387. .bs-searchbox .form-control {
  388.   margin-bottom: 0;
  389.   width: 100%;
  390.   float: none;
  391. }
  392. /*# sourceMappingURL=bootstrap-select.css.map */

Raw Paste


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