为什么要除去input输入框的默认样式
咱们平时用手机上H5做网页，肯定遇到过那个叫input的输入框老是和设计不搭调，让人看着别扭。所以，得给它换个模样儿，让显示出来的更好看点儿。下面就教你怎么把input输入框的默认样式去掉，还有要注意啥事儿。
用透明色去掉背景色就行
做手机H5网页时，有时候得把input小方格的背景颜色给去掉。用background-color:transparent;这个方法能实现，在iPhone上效果挺好，但是在安卓机上就可能出问题了。所以，我们开发时要注意每个设备都要合适！
有时候，只用background-color:transparent;是不够的，还得加上FILTER:alpha(opacity=0);这句代码才能彻底去掉背景颜色。这个办法能保证你在Android设备上看起来干净利落，提高网页的颜值。
处理边框显示问题
除了背景颜色，input框边框有时也有点刺眼或和平常设计不同步。这时候，你就可以试试把边框设成none或0，这样子输入框看起来就更顺眼！
用手机上的H5网页时，有些时候日期输入框旁边有个小图标挺碍眼的。别担心，只要用style=”appearance:none;”把它藏起来就好！这样既美观又好用~
" class="imgCen" onclick="updateDate(-1);"/> " class="imgCen" onclick="updateDate(1);" style="max-width:90%"/>
实战案例分享
最佳学习方式就是动手做，比如做个微信查单的HTML5页面。这个页面上有个选时间段的功能，你就可以用刚才说的方法来美化那个日期输入框。先把底层颜色和边框去了，再把日期选择图标藏起来，这样整个页面看起来更舒服。
通过上面这些真实案例的分享，你们应该知道怎么去掉inputinput框的默认样貌，还有就是要考虑到在不同设备上可能遇到的兼容性问题。实际上开发时，要用各种各样的样式设置才能做到最好看。
总结与展望
.date input[type=date] {
background-color:transparent;
color:#fff;
FILTER: alpha(opacity=0); /*androd*/
appearance:none; /*下拉框去掉右侧图标*/
-moz-appearance:none;
-webkit-appearance:none;
}
这个移动端H5页面开发可真是个不断挑战自己的活儿！搞定input输入框默认样式那就是必须要有的技巧和经验~所以，今天我就来给大家分享下如何更加精细化地设计手机上的H5页面里的input输入框样式。
手机发展得飞快，我们也得抓紧时间学新东西！赶紧提高自己做H5页面的水平，别落后了被淘汰了~希望大家多多动手，多练习，做出更出色的H5作品来！
评论0