Select.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. ul{
  2. margin:0px;
  3. padding:0px;
  4. border-radius:3px;
  5. width:100%;
  6. }
  7. .rotate180{
  8. transform: rotate(180deg);
  9. }
  10. .my-Select{
  11. position: relative;
  12. display: inline-block;
  13. vertical-align: middle;
  14. }
  15. .my-Select .fa{
  16. position: absolute;
  17. right: 7px;
  18. top: 0;
  19. z-index: 1;
  20. color: #ccc;
  21. top: 9px;
  22. }
  23. .my-Select input{
  24. background: transparent;
  25. }
  26. .my-Select > .select-screen{
  27. width: 100%;
  28. padding: 0 24px 0 8px;
  29. min-height: 32px;
  30. position: relative;
  31. display: inline-block;
  32. outline: 0;
  33. user-select: none;
  34. cursor: pointer;
  35. position: relative;
  36. background-color: #fff;
  37. border-radius: 4px;
  38. border: 1px solid #dddee1;
  39. transition: all .2s ease-in-out;
  40. }
  41. .my-Select > .select-screen.disabled{
  42. background: #f3f3f3 !important;
  43. }
  44. .my-Select > .select-screen.active{
  45. border-color: #57a3f3;
  46. outline: 0;
  47. box-shadow: 0 0 0 2px rgba(45,140,240,.2);
  48. }
  49. .my-Select > .select-screen input,.my-Select > .select-screen div{
  50. width: 100%;
  51. min-height: 32px;
  52. border: none;
  53. outline: none;
  54. }
  55. .select-list{
  56. width:100%;
  57. position: absolute;
  58. top: 37px;
  59. left: 0;
  60. z-index: 5;
  61. border-radius: 4px;
  62. padding: 5px 0;
  63. background-color: #fff;
  64. box-sizing: border-box;
  65. border-radius: 4px;
  66. box-shadow: 0 1px 6px rgba(0,0,0,.2);
  67. position: absolute;
  68. max-height: 250px;
  69. overflow-y: auto;
  70. overflow-x: hidden;
  71. }
  72. /* 多选 */
  73. .my-Select > .select-screen div{
  74. padding-bottom: 5px;
  75. }
  76. .my-Select .multiple-list{
  77. /*margin: 3px 4px 2px 0;*/
  78. display: inline-block;
  79. height: 22px;
  80. line-height: 20px;
  81. margin: 5px 4px 0 0;
  82. padding: 0 8px;
  83. border: 1px solid #e9eaec;
  84. border-radius: 3px;
  85. background: #f7f7f7;
  86. font-size: 12px;
  87. vertical-align: middle;
  88. opacity: 1;
  89. overflow: hidden;
  90. cursor: pointer;
  91. position: relative;
  92. padding-right: 20px;
  93. }
  94. .my-Select .multiple-list:hover{
  95. opacity: .75
  96. }
  97. .my-Select .multiple-list i{
  98. position: absolute;
  99. font-size: 14px;
  100. right: 2px;
  101. margin-right:0;
  102. top: 1px;
  103. }
  104. .my-Select li{
  105. line-height: normal;
  106. padding: 7px 16px;
  107. clear: both;
  108. color: #495060;
  109. font-size: 12px!important;
  110. /*white-space: nowrap;*/
  111. list-style: none;
  112. cursor: pointer;
  113. transition: background .2s ease-in-out;
  114. word-break: break-all;
  115. }
  116. .my-Select li:hover{
  117. background: #f3f3f3;
  118. }
  119. .my-Select li.active{
  120. color: #fff;
  121. background: rgba(45,140,240,.9);
  122. }
  123. .my-Select .disabled li.active{
  124. background: #b9cad2 !important;
  125. }
  126. .select-list.disabled{
  127. background: #f3f3f3 !important;
  128. }
  129. .my-Select .select-list-specile{
  130. position: initial;
  131. height: 200px;
  132. margin-top: 5px;
  133. }