city-picker.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. .city-picker-input {
  2. opacity: 0 !important;
  3. top: -9999px;
  4. left: -9999px;
  5. position: absolute;
  6. }
  7. .city-picker-span {
  8. position: relative;
  9. display: block;
  10. outline: 0;
  11. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  12. border-bottom: 1px solid #ccc;
  13. background-color: #fff;
  14. color: #ccc;
  15. cursor: pointer;
  16. }
  17. .city-picker-span > .placeholder {
  18. color: #aaa;
  19. }
  20. .city-picker-span > .arrow {
  21. position: absolute;
  22. top: 50%;
  23. right: 8px;
  24. width: 10px;
  25. margin-top: -3px;
  26. height: 5px;
  27. background: url(../images/drop-arrow.png) -10px -25px no-repeat;
  28. }
  29. .city-picker-span.focus,
  30. .city-picker-span.open {
  31. border-bottom-color: #46A4FF;
  32. }
  33. .city-picker-span.open > .arrow {
  34. background-position: -10px -10px;
  35. }
  36. .city-picker-span > .title > span {
  37. color: #333;
  38. padding: 5px;
  39. border-radius: 3px;
  40. }
  41. .city-picker-span > .title > span:hover {
  42. background-color: #f1f8ff;
  43. }
  44. .city-picker-dropdown {
  45. position: absolute;
  46. width: 315px;
  47. left: -9999px;
  48. top: -9999px;
  49. outline: 0;
  50. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  51. z-index: 999999;
  52. display: none;
  53. min-width: 330px;
  54. margin-bottom: 20px;
  55. }
  56. .city-select-wrap {
  57. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  58. }
  59. .city-select-tab {
  60. border-bottom: 1px solid #ccc;
  61. background: #f0f0f0;
  62. font-size: 13px;
  63. }
  64. .city-select-tab > a {
  65. display: inline-block;
  66. padding: 8px 22px;
  67. border-left: 1px solid #ccc;
  68. border-bottom: 1px solid transparent;
  69. color: #4D4D4D;
  70. text-align: center;
  71. outline: 0;
  72. text-decoration: none;
  73. cursor: pointer;
  74. font-size: 14px;
  75. margin-bottom: -1px;
  76. }
  77. .city-select-tab > a.active {
  78. background: #fff;
  79. border-bottom: 1px solid #fff;
  80. color: #46A4FF;
  81. }
  82. .city-select-tab > a:first-child {
  83. border-left: none;
  84. }
  85. .city-select-tab > a:last-child.active {
  86. border-right: 1px solid #ccc;
  87. }
  88. .city-select-content {
  89. width: 100%;
  90. min-height: 10px;
  91. background-color: #fff;
  92. padding: 10px 15px;
  93. box-sizing: border-box;
  94. }
  95. .city-select {
  96. font-size: 13px;
  97. }
  98. .city-select dl {
  99. line-height: 2;
  100. clear: both;
  101. padding: 3px 0;
  102. margin: 0;
  103. }
  104. .city-select dt {
  105. position: absolute;
  106. width: 2.5em;
  107. font-weight: 500;
  108. text-align: right;
  109. line-height: 2;
  110. }
  111. .city-select dd {
  112. margin-left: 0;
  113. line-height: 2;
  114. }
  115. .city-select.province dd {
  116. margin-left: 3em;
  117. }
  118. .city-select a {
  119. display: inline-block;
  120. padding: 0 10px;
  121. outline: 0;
  122. text-decoration: none;
  123. white-space: nowrap;
  124. margin-right: 2px;
  125. text-decoration: none;
  126. color: #333;
  127. cursor: pointer;
  128. }
  129. .city-select a:hover,
  130. .city-select a:focus {
  131. background-color: #f1f8ff;
  132. border-radius: 2px;
  133. color: #46A4FF;
  134. }
  135. .city-select a.active {
  136. background-color: #46A4FF;
  137. color: #fff;
  138. border-radius: 2px;
  139. }