表单元素在网页设计中使用的非常频繁，如文本输入框、单选框、复选框、选择列表、上传文件，它们在浏览器中的展现有自带的外观，为了在视觉上取得更好的产品体验，保持客户端的统一，通常产品经理会提出需要改变它的外观，使用自定义的，对于产品本身来说这样的要求是加分项，开发在力所能及的范围内应该大力支持。做H5移动开发，并没有原生APP开发那样，大部分内容都可以自定义，移动端H5页面受手机系统的影响，不同的浏览厂商对表单元素的渲染效果差异很大。
下图为 iphone4s 、魅族 android4.4 、诺基亚 winphone8 三部测试机下4种不同表单元素的默认外观展现。
从上图我们可以看出：
表单输入框有默认的内阴影
单选框和复选框有默认的边框和选中状态
选择列表有默认下拉箭头
那么，如何改变表单元素的外观呢，由于浏览器厂商不同，对 webkit 和 IE10 的处理方式也不同~
一、使用 appearance 改变 webkit 浏览器的默认外观
webkit 内核浏览器具备私有属性" -webkit-appearance "可以改变元素的外观，该属性非常强大，适合大部分标签，这对于 webkit 的页面优化带来极大的帮助。
禁用表单input、select元素的默认外观
input,select{-webkit-appearance:none; appearance:none; }
更多 -webkit-appearance 的介绍，这里推荐这篇文章《使用CSS3的appearance属性改变元素的外观》，对它有详细的讲解。
二、使用伪元素改变 IE10 表单元素默认外观
上个月，为了适配微信 winphone 5.0 版本的 IE10 浏览器，我做了一些对 IE10 兼容的测试，并写了《迎接微信winphone 5.0 版本的IE10样式兼容》一文，之前处理 IE10 表单元素的默认外观是采用透明度为 opacity:0 的写法来重置表单的外观，这个办法使用起来有点复杂，对表单内容的输入，需要做额外的处理。近期浏览IE开发人员指南的官网，了解到 IE10 对表单元素的默认外观也新增了伪元素来处理，也算是向前看齐，可能是因为 winphone 用户少，大家目前只做好 webkit 做兼容，对 winphone 兼容缺少了关注，今天分享下 3 个常用的伪类元素。
禁用 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;
}
关于 IE10 伪元素的介绍，大家可以关注IE10官网伪元素 (Pseudo-elements)，讲得非常详细~
实例代码
通过以上的3项优化后，告别了矮龊穷，适当锦上添花，得到炫酷的视觉效果~
代码：
自定义表单元素的外观
测试demo请进入
结束语
由于电脑没有安装 IE11，不知道微软在 IE11 的版本有无支持 apprearance ，如果有，那么标准也算是出来啦，对全世界都好，如果say no，只能说：呵呵，你妹的！！！
如今手机浏览器厂商前缀无非 -webkit 和 -ms ，webkit 很明显占据了的优势，虽然这样，但我们也不能忽视了微软的 winphone ，毕竟有一定的用户就不可忽视它的价值，只希望它们早日达成一致，向标准靠齐~
转摘自：http://www.cnblogs.com/PeunZhang/p/3522603.html