扫描下面的二维码,“关注”我的百家号。
对于表单控件的样式修改一直是个老大难的问题,如果不做大手术,还是很好兼容IE10和谷歌等现代浏览器的。
有两种常规方法。
第一种:直接干掉select旁边的小箭头,用图片或者border绘制三角形代替。
chrome下面需要利用谷歌的私有属性-webkit-appearance完成。这个appearance是IE不支持的,所以真的很讨厌IE。
结合谷歌的很多私有伪元素选择器,还是可以很好地改变控件的样式。
比如:
::-webkit-textfield-decoration-container input内部、上下箭头以及填写数值的外部容器
::-webkit-inner-spin-button 就是Chrome上上下下的小小按钮
隐藏select下拉菜单的小箭头代码只需要写上:
select{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;/*隐藏下拉箭头,IE不支持此属性*/
}
如果需要隐藏小箭头,则需要一个容器结合一个伪元素伪装成一个select,再把真正的select隐藏起来。
在IE10+以上,隐藏小箭头的代码如下:
/*兼容IE10+,小箭头不可见*/
.select-wrap select::-ms-expand{
display:none;}
到了IE9,小箭头藏不住了,那么可以让自己绘制的三角形隐藏。
在html头部加上如下代码,低于IE9版本的隐藏:
<!--[if lte IE 9]>
<style type="text/css">
.select-wrap:after{
display:none;}
</style>
<![endif]-->
如果不想隐藏默认的小箭头,也可以,只不过IE下面只要为select加了border,小箭头上面也有边框背景出现,所以,也需要兼容一下IE。
第二种方法,使用默认小箭头:
如果想完美的一致,那就只能用div,ul,li结合js的写法了。
如果前端少一点兼容性的问题,世界肯定更加和谐,前端开发(不分男女)的发际线就可以保住。
欢迎“关注”我的百家号。
- 加入我的QQ群
- 关注我的百家号
border绘制三角形这个真的很好用。