Home  >  Article  >  Web Front-end  >  How to remove the default style in html

How to remove the default style in html

藏色散人
藏色散人Original
2021-02-25 11:00:239654browse

htmlMethods to remove the default style: 1. Remove the default style globally through "*{padding:0;margin:0;box-sizing: border-box;font-size: 14px;}"; 2 , a tag removes the default style; 3. li tag removes the default style, etc.

How to remove the default style in html

The operating environment of this article: Windows7 system, HTML5&&CSS3, Dell G3 computer

html tag default style removal list

1. Remove the default style globally

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

2. Remove the default style from the a tag

 a{text-decoration: none;color:#333;}
 a:hover, a:visited, a:link, a:active {
    color:#333;
    // 设置使所有a标签的四种状态都和本身颜色保持一致,样式代码自己写
}

3. li

ul,ol{list-style: none;}

4. img

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

5. button

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

6. select [Recommended: HTML video tutorial]

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;
}

7. h1

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

8. input, textarea

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

9, italic i

i{font-style: normal;}

10, table

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

11, remove input[type=number] plus and minus signs

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

The above is the detailed content of How to remove the default style in html. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn