cs-select.css 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. /* Default custom select styles */
  2. div.cs-select {
  3. display: inline-block;
  4. vertical-align: middle;
  5. position: relative;
  6. text-align: left;
  7. background: #fff;
  8. z-index: 100;
  9. width: 100%;
  10. max-width: 250px;
  11. margin-right: 20px;
  12. margin-bottom: 10px;
  13. -webkit-touch-callout: none;
  14. -webkit-user-select: none;
  15. -khtml-user-select: none;
  16. -moz-user-select: none;
  17. -ms-user-select: none;
  18. user-select: none;
  19. }
  20. div.cs-select:focus {
  21. outline: none; /* For better accessibility add a style for this in your skin */
  22. }
  23. .cs-select select {
  24. display: none;
  25. }
  26. .cs-select span {
  27. display: block;
  28. position: relative;
  29. cursor: pointer;
  30. padding: 1em;
  31. white-space: nowrap;
  32. overflow: hidden;
  33. text-overflow: ellipsis;
  34. }
  35. /* Placeholder and selected option */
  36. .cs-select > span {
  37. padding-right: 3em;
  38. }
  39. .cs-select > span::after,
  40. .cs-select .cs-selected span::after {
  41. speak: none;
  42. position: absolute;
  43. top: 50%;
  44. -webkit-transform: translateY(-50%);
  45. transform: translateY(-50%);
  46. -webkit-font-smoothing: antialiased;
  47. -moz-osx-font-smoothing: grayscale;
  48. }
  49. .cs-select > span::after {
  50. content: '\f078';
  51. right: 1em;
  52. }
  53. .cs-select .cs-selected span::after {
  54. font-family: 'FontAwesome';
  55. content: '\f00c';
  56. margin-left: 1em;
  57. }
  58. .cs-select.cs-active > span::after {
  59. -webkit-transform: translateY(-50%) rotate(180deg);
  60. transform: translateY(-50%) rotate(180deg);
  61. }
  62. div.cs-active {
  63. z-index: 200;
  64. }
  65. /* Options */
  66. .cs-select .cs-options {
  67. position: absolute;
  68. overflow: hidden;
  69. width: 100%;
  70. background: #fff;
  71. visibility: hidden;
  72. }
  73. .cs-select.cs-active .cs-options {
  74. visibility: visible;
  75. }
  76. .cs-select ul {
  77. list-style: none;
  78. margin: 0;
  79. padding: 0;
  80. width: 100%;
  81. }
  82. .cs-select ul span {
  83. padding: 1em;
  84. }
  85. .cs-select ul li.cs-focus span {
  86. background-color: #ddd;
  87. }
  88. /* Optgroup and optgroup label */
  89. .cs-select li.cs-optgroup ul {
  90. padding-left: 1em;
  91. }
  92. .cs-select li.cs-optgroup > span {
  93. cursor: default;
  94. }