清除默认样式与更改样式

清除默认样式

一般在项目中按钮默认会显示固定的样式，我们要手动清除

全局去除默认样式

包括a标签li标签

*{padding:0;
 margin:0;
 box-sizing: border-box;
 font-size: 14px;
 text-decoration: none;
list-style: none;
}

清除button所有默认样式

button {
  margin: 0;
  padding: 0;
  outline: none;
  border-radius: 0;
  background-color: transparent;
  line-height: inherit;
  width: max-content;
}
button:after {
  border: none;
}
 /*取消button点击的默认样式*/
 button:focus {
  border: 0 none;
  outline: none !important;
    }

清除select默认样式

  border: none;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    /*在选择框的最右侧中间显示小箭头图片*/
    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
    padding-right: 14px;

清除h1-h6默认样式

h1,h2,h3,h4,h5,h6{font-weight:normal;}

清除input，textarea默认样式

input,textarea {
    outline: none;
    border: none;
}
textarea {
    resize: none;
    overflow: auto;
}

清除 斜体 i 默认样式

i{font-style: normal;}

清除 table 默认样式

table{border-collapse:collapse;border-spacing:0;}

清除 input[type=number]加减号

/*去除input[type=number]加减号*/
/* 谷歌 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
/* 火狐 */
input{
    -moz-appearance:textfield;
}

更改样式

如何设置checkbox和radio的大小

<input type="checkbox" style="zoom: 220%;">
<input type="radio" style="zoom: 220%;">

自定义 radio 的样式，更改选中样式

参考这个