reset.css 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. @charset"utf-8";
  2. /*
  3. *Name: CSS Reset.
  4. * Author:huzhangjun
  5. * Time:2017-04-17
  6. */
  7. /* Reset default browser CSS. */
  8. *{
  9. margin:0;
  10. padding:0;
  11. -webkit-box-sizing: border-box;
  12. box-sizing: border-box;
  13. outline: none;
  14. }
  15. html, body, div, span, applet, object, iframe,
  16. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  17. a, abbr, acronym, address, big, cite, code,
  18. del, dfn, em, img, ins, kbd, q, s, samp,
  19. small, strike, strong, sub, sup, tt, var,
  20. b, u, i, center,
  21. dl, dt, dd, ol, ul, li,
  22. fieldset, form, label, legend,
  23. table, caption, tbody, tfoot, thead, tr, th, td,
  24. article, aside, canvas, details, embed,
  25. figure, figcaption, footer, header, hgroup,
  26. menu, nav, output, ruby, section, summary,
  27. time, mark, audio, video {
  28. margin: 0;
  29. padding: 0;
  30. border: 0;
  31. }
  32. /* HTML5 display-role reset for older browsers */
  33. article, aside, details, figcaption, figure,
  34. footer, header, hgroup, menu, nav, section {
  35. display: block;
  36. }
  37. ol, ul,li {
  38. list-style: none;
  39. }
  40. blockquote, q {
  41. quotes: none;
  42. }
  43. blockquote:before, blockquote:after,
  44. q:before, q:after {
  45. content: '';
  46. content: none;
  47. }
  48. table {
  49. border-collapse: collapse;
  50. border-spacing: 0;
  51. }
  52. html {
  53. font-family: sans-serif;
  54. -webkit-text-size-adjust: 100%;/*旋转屏幕时,字体大小调整的问题*/
  55. box-sizing: border-box;
  56. overflow-x: hidden;
  57. background: #fff;
  58. }
  59. body{
  60. padding-top: constant(safe-area-inset-top);
  61. padding-right: constant(safe-area-inset-right);
  62. padding-bottom: constant(safe-area-inset-bottom);
  63. padding-left: constant(safe-area-inset-left);}
  64. body {
  65. font-family:/*"Helvetica Neue",Helvetica,STHeiTi,sans-serif;*/-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
  66. line-height: 1.5;
  67. font-size:14px;
  68. color:#333;
  69. height: 100%;
  70. -webkit-touch-callout: none;/*禁止系统默认菜单弹出 behavior允许弹出*/
  71. -webkit-overflow-scrolling: touch; /*touch 当手指从触摸屏上移开,会保持一段时间的滚动 auto时:滚动会立即停止 */
  72. -webkit-tap-highlight-color: rgba(0,0,0,0.3);/*解决ios半透明的灰色背景*/
  73. overflow-scrolling: touch;/*上下拉动滚动条时卡顿、慢*/
  74. -webkit-user-select: none;/*用于设置用户是否能够选中文本 | text | all | element IE浏览器下是通过 onselectstart=”javascript:return false;”*/
  75. -moz-user-select: none;
  76. -khtml-user-select: none;
  77. user-select: none;/*禁止复制、选中文本*/
  78. -webkit-appearance: none;/*去除系统默认appearance的样式,常用于IOS下移除原生样式*/
  79. border-width: medium;/*thin定义细的边框。medium默认定义中等的边框。thick定义粗的边框。length允许您自定义边框的宽度。 inherit规定应该从父元素继承边框宽度。*/
  80. -webkit-font-smoothing: antialiased;/*字体抗锯齿,使用后字体看起来会更清晰*/
  81. -moz-osx-font-smoothing: grayscale;/*Gecko字体抗锯齿,使用后字体看起来会更清晰*/
  82. overflow-x: hidden;
  83. }
  84. a {
  85. text-decoration: none;
  86. color: #000;
  87. -webkit-tap-highlight-color: transparent;/*解决ios半透明的灰色背景*/
  88. }
  89. /*滑动条srollStyle*/
  90. ::-webkit-scrollbar {
  91. width: 2px;
  92. height:2px;
  93. }
  94. ::-webkit-scrollbar-track-piece {
  95. background-color: rgba(0, 0, 0, 0.2);
  96. -webkit-border-radius: 6px;
  97. }
  98. ::-webkit-scrollbar-thumb:vertical {
  99. height: 2px;
  100. background-color: rgba(125, 125, 125, 0.7);
  101. -webkit-border-radius: 6px;
  102. }
  103. ::-webkit-scrollbar-thumb:horizontal {
  104. width: 2px;
  105. background-color: rgba(125, 125, 125, 0.7);
  106. -webkit-border-radius: 6px;
  107. }
  108. html input[type="button"],
  109. input[type="reset"],
  110. input[type="submit"] {
  111. -webkit-appearance: button;
  112. cursor: pointer;
  113. }
  114. input[type="checkbox"],
  115. input[type="radio"] {
  116. box-sizing: border-box;
  117. }
  118. input[type="text"],
  119. input[type="search"],
  120. input[type="email"],
  121. input[type="tel"],
  122. input[type="url"],
  123. input[type="date"],
  124. input[type="datetime-local"],
  125. input[type="time"],
  126. input[type="number"],
  127. select,textarea {
  128. -webkit-appearance: none;
  129. -moz-appearance: none;
  130. -ms-appearance: none;
  131. appearance: none;
  132. box-sizing: border-box;
  133. border: none;
  134. background: none;
  135. border-radius: 0 0 0 0;
  136. box-shadow: none;
  137. }
  138. a,
  139. input,
  140. textarea,
  141. select,
  142. button {
  143. outline: 0;
  144. }
  145. i, em {font-style: normal;}
  146. div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
  147. /*** Utility Classes ***/
  148. input:focus,button:focus,select:focus,textarea:focus{outline: none;}
  149. /* ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉*/
  150. button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-appearance: none;border: 0; }
  151. /* 部分android系统中元素被点击时产生的边框怎么去掉*/
  152. button,input,textarea{
  153. -webkit-tap-highlight-color: rgba(0,0,0,0;);
  154. -webkit-user-modify:read-write-plaintext-only;
  155. }
  156. /*webkit表单输入框placeholder的颜色值改变*/
  157. input::-webkit-input-placeholder{color:#AAAAAA;}
  158. input:focus::-webkit-input-placeholder{color:#EEEEEE;}
  159. /*webkit表单元素的默认外观重置*/
  160. .app{-webkit-appearance:none;}
  161. /*伪元素改变number类型input框的默认样式*/
  162. input[type=number]::-webkit-textfield-decoration-container {background-color: transparent; }
  163. input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none;}
  164. input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;}
  165. /*禁用 select 默认下拉箭头*/
  166. select::-ms-expand {display: none;}
  167. /*禁用PC端表单输入框默认清除按钮*/
  168. input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display: none;}
  169. /*禁用 radio 和 checkbox 默认样式*/
  170. input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}
  171. /*去掉苹果默认样式*/
  172. input{-webkit-appearance: none;border: none;box-sizing: border-box;font-family: "Consolas",Microsoft Yahei;}
  173. input[type="button"],input[type="submit"]{ cursor: pointer;}
  174. img{vertical-align: bottom; border: none;}
  175. em,i{ font-style: normal;}
  176. ::selection{background: #333;color: #fff;}