表单元素在网页设计中使用的非常频繁，如文本输入框、单选框、复选框、选择列表、上传文件，它们在浏览器中的展现有自带的外观，为了在视觉上取得更好的产品体验，保持客户端的统一，通常产品经理会提出需要改变它的外观，使用自定义的，对于产品本身来说这样的要求是加分项，开发在力所能及的范围内应该大力支持。做h5移动开发，并没有原生app开发那样，大部分内容都可以自定义，移动端h5页面受手机系统的影响，不同的浏览厂商对表单元素的渲染效果差异很大。
下图为 iphone4s 、魅族 android4.4 、诺基亚 winphone8 三部测试机下4种不同表单元素的默认外观展现。
从上图我们可以看出：
表单输入框有默认的内阴影
单选框和复选框有默认的边框和选中状态
选择列表有默认下拉箭头
那么，如何改变表单元素的外观呢，由于浏览器厂商不同，对 webkit 和 ie10 的处理方式也不同~
webkit 内核浏览器具备私有属性" -webkit-appearance "可以改变元素的外观，该属性非常强大，适合大部分标签，这对于 webkit 的页面优化带来极大的帮助。
禁用表单input、select元素的默认外观
禁用 select 默认下拉箭头
::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。
::-ms-check 适用于表单复选框或单选按钮默认图标的修改，同样有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。
当表单文本输入框输入内容后会显示文本清除按钮，::-ms-clear 适用于该清除按钮的修改，同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。
通过以上的3项优化后，告别了矮龊穷，适当锦上添花，得到炫酷的视觉效果~
代码：
由于电脑没有安装 ie11，不知道微软在 ie11 的版本有无支持 apprearance ，如果有，那么标准也算是出来啦，对全世界都好，如果say no，只能说：呵呵，你妹的！！！
如今手机浏览器厂商前缀无非 -webkit 和 -ms ，webkit 很明显占据了的优势，虽然这样，但我们也不能忽视了微软的 winphone ，毕竟有一定的用户就不可忽视它的价值，只希望它们早日达成一致，向标准靠齐~
作者：白树