清除默认样式

约 621 字大约 2 分钟

2024-10-02

清除标签默认的样式, 比如默认的内外边距.

全局去除默认样式

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 14px;
}

超链接

a {
    text-decoration: none;
    color: #333;
}

a:hover,
a:visited,
a:link,
a:active {
    color: #333;
}

列表项目符号

ul,
ol {
    list-style: none;
}

图片

img {
    vertical-align: top;
    border: none;
}

按钮

.button {
    border: 0;
    background-color: none;
    outline:none;
    -webkit-appearance: none;
}

下拉列表

select {
    border: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url("http://ourjs.github.io/static/2015/arrow.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: right center;
    background-color: transparent;
    padding-right: 14px;
}

标题

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

表单组件

input,
textarea {
    outline: none;
    border: none;
}

textarea {
    resize: none;
    overflow: auto;
}

表单组件 number 加减号

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input {
    -moz-appearance: textfield;
}

斜体i

i {
    font-style: normal;
}

表格

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

一步到胃

/* 全局去除默认样式 */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 14px;
}

/* a标签去除默认样式 */
a {
    text-decoration: none;
    color: #333;
}

/* 设置使所有a标签的四种状态都和本身颜色保持一致 */
a:hover,
a:visited,
a:link,
a:active {
    color: #333;
}

/* li */
ul,
ol {
    list-style: none;
}

/* img */
img {
    vertical-align: top;
    border: none;
}

/* button */
.button {
    border: 0;
    background-color: none;
    outline:none;
    /* 用于IOS下移除原生样式 */
    -webkit-appearance: none;
}

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

/* h1 */
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::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* 火狐 */
input {
    -moz-appearance: textfield;
}

一条龙服务

*{padding:0;margin:0;box-sizing:border-box;font-size:14px}a{text-decoration:none;color:#333}a:hover,a:visited,a:link,a:active{color:#333}ul,ol{list-style:none}img{vertical-align:top;border:0}.button{border:0;background-color:none;outline:0;-webkit-appearance:none}select{border:0;appearance:none;-moz-appearance:none;-webkit-appearance:none;background-image:url(http://ourjs.github.io/static/2015/arrow.png);background-repeat:no-repeat;background-attachment:scroll;background-position:right center;background-color:transparent;padding-right:14px}h1,h2,h3,h4,h5,h6{font-weight:400}input,textarea{outline:0;border:0}textarea{resize:none;overflow:auto}i{font-style:normal}table{border-collapse:collapse;border-spacing:0}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}input{-moz-appearance:textfield}

版权所有

版权归属：Erhai_lake

许可证：署名 4.0 国际 (CC-BY-4.0)