首页 > 网站 > WEB开发 > 正文

css3 select 美化

2024-04-27 15:04:17
字体:
来源:转载
供稿:网友

主要针对右边的箭头进行优化,因为不同的浏览器默认的右边的箭头不一样,但是ie9不支持 appearance:none;,所以ie9以及以下版本就用js写一下,不优化,使用默认的样式 html页面代码:

<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> </select>

CSS样式:

select { border: solid 1px #000; appearance:none; -moz-appearance:none; -webkit-appearance:none; padding-right: 14px; background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent; /* background:white/9/0;*/}select::-ms-expand { display: none; background: none;} /*去除ie浏览器默认的select样式*/

js代码:

if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE9.0") { $("select").css("background","none"); }页面实现的最终样式![这里写图片描述](http://img.blog.csdn.net/20170204163617263?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzAxODM1Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表