jquery.searchableSelect.css 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. .searchable-select-hide {
  2. display: none;
  3. }
  4. .searchable-select {
  5. display: inline-block;
  6. min-width: 200px;
  7. font-size: 14px;
  8. line-height: 1.428571429;
  9. color: #555;
  10. vertical-align: middle;
  11. position: relative;
  12. outline: none;
  13. }
  14. .searchable-select-holder{
  15. padding: 6px;
  16. background-color: #fff;
  17. background-image: none;
  18. border: 1px solid #ccc;
  19. border-radius: 4px;
  20. min-height: 30px;
  21. box-sizing: border-box;
  22. -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  23. box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  24. -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  25. transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  26. }
  27. .searchable-select-caret {
  28. position: absolute;
  29. width: 0;
  30. height: 0;
  31. box-sizing: border-box;
  32. border-color: black transparent transparent transparent;
  33. top: 0;
  34. bottom: 0;
  35. border-style: solid;
  36. border-width: 5px;
  37. margin: auto;
  38. right: 10px;
  39. }
  40. .searchable-select-dropdown {
  41. position: absolute;
  42. background-color: #fff;
  43. border: 1px solid #ccc;
  44. border-bottom-left-radius: 4px;
  45. border-bottom-right-radius: 4px;
  46. padding: 4px;
  47. border-top: none;
  48. top: 28px;
  49. left: 0;
  50. right: 0;
  51. }
  52. .searchable-select-input {
  53. margin-top: 5px;
  54. border: 1px solid #ccc;
  55. outline: none;
  56. padding: 4px;
  57. width: 100%;
  58. box-sizing: border-box;
  59. width: 100%;
  60. }
  61. .searchable-scroll {
  62. margin-top: 4px;
  63. position: relative;
  64. }
  65. .searchable-scroll.has-privious {
  66. padding-top: 16px;
  67. }
  68. .searchable-scroll.has-next {
  69. padding-bottom: 16px;
  70. }
  71. .searchable-has-privious {
  72. top: 0;
  73. }
  74. .searchable-has-next {
  75. bottom: 0;
  76. }
  77. .searchable-has-privious, .searchable-has-next {
  78. height: 16px;
  79. left: 0;
  80. right: 0;
  81. position: absolute;
  82. text-align: center;
  83. z-index: 10;
  84. background-color: white;
  85. line-height: 8px;
  86. cursor: pointer;
  87. }
  88. .searchable-select-items {
  89. max-height: 400px;
  90. overflow-y: scroll;
  91. position: relative;
  92. }
  93. .searchable-select-items::-webkit-scrollbar {
  94. display: none;
  95. }
  96. .searchable-select-item {
  97. padding: 5px 5px;
  98. cursor: pointer;
  99. min-height: 30px;
  100. box-sizing: border-box;
  101. transition: all 1s ease 0s;
  102. }
  103. .searchable-select-item.hover {
  104. background: #555;
  105. color: white;
  106. }
  107. .searchable-select-item.selected {
  108. background: #28a4c9;
  109. color: white;
  110. }