Remove the default style of form elements

一、使用 appearance 改变 webkit 浏览器的默认外观

webkit 内核浏览器具备私有属性" -webkit-appearance "可以改变元素的外观，该属性非常强大，适合大部分标签，这对于 webkit 的页面优化带来极大的帮助。

禁用表单input、select元素的默认外观

input,select{-webkit-appearance:none;        appearance:none;  }

二、使用伪元素改变 IE10 表单元素默认外观

禁用 select 默认下拉箭头

::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

select::-ms-expand {display: none;}

禁用 radio 和 checkbox 默认样式

::-ms-check 适用于表单复选框或单选按钮默认图标的修改，同样有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}

禁用PC端表单输入框默认清除按钮

当表单文本输入框输入内容后会显示文本清除按钮，::-ms-clear 适用于该清除按钮的修改，同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display: none;}

 

去除表单元素的默认样式