CSS 清除表单输入元素的默认样式

在开发表单相关组件时,常常会基于原生 HTML 输入元素进行设计。此时,往往会要求对原生元素的样式进行重置。那么,该如何清除原生元素的样式呢?

踩过一些坑后,分享一下我的 CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.form-field-reset {
border: 0;
border-radius: 0; /* iOS */
outline: 0;
margin: 0;
padding: 0;
resize: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
color: inherit;
font: inherit;
line-height: inherit;
vertical-align: middle;
background-color: transparent;
}