css设置下拉列表select的padding值

话说这原生select标签,在每个浏览器中自是各有各的面相,也只接受少数css属性的打扮,Safari里的select最为顽固,坚持素颜绝不动摇。可是艺术感超强的设计师们可不会将就,于是,聪明的程序员哥哥们开发了各种各样的select美化插件,许多杰作操作简单,灵活多变,美轮美奂,膜拜中。。。

近来遇到的一个问题是,需求只是要给select加上边内补白,就是padding啦,FF、Chrome、IE都很给力,而Safari里根本不起作用啦!如果装个美化插件,感觉有点像是拿大炮打蚊子,还得麻烦程序员哥哥去读插件的使用文档,出了问题要我提头去见(夸张),原生select多简单哪!

text-indent可以使select里的文本缩进,也能实现左边内补白的效果。可是右边被切掉了啊啊啊。。。如图:select

世界如此美妙,我却如此暴躁,这样不好,不好。

于是决定先应用padding,再对webkit浏览器做一个简单的hack。将-webkit-appearance属性设置为none,清除掉select的默认样式,再用css模拟一个select的样式,于是,想要多少padding值随我折腾,看代码:

Windows的FF、Chrome、IE、Safari,Mac的FF、Chrome,Safari以及iPhone4和android chrome(忘记机型)都没问题,别看说得这么啰嗦,其实只有1点,就是hack,如大神有高招,请给我留言。

PS:妹纸我弄这,是不是太闲了!



Leave a Reply

Your email address will not be published. Required fields are marked *

*