时间:2021-07-01 10:21:17 帮助过:8人阅读
.self-select-wrapper{ position: relative; display: inline-block; border: 1px solid #d0d0d0; width: 250px; height:40px; font-size: 14px; } div.self-select-wrapper{ /*解决IE67 块级元素不支持display:inline-block*/ *display:inline; } .self-select-wrapper .self-select-display{ display: inline-block; cursor: pointer; width:100%; height:40px; background: -moz-linear-gradient(top, #fff, #eee); background: -o-linear-gradient(top,#fff, #eee); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eee)); filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#eeeeee); } .self-select-display .self-select-text{ padding-left:10px; display: inline-block; line-height: 40px; width: 210px; } .self-select-display .self-select-arrow-down{ height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; display: inline-block; vertical-align: middle; border-color:#aaa transparent transparent transparent; border-style:solid dashed dashed dashed; border-width:7px; } .self-select-wrapper .self-select-ul{ position: absolute; max-height:200px; _height:200px; border: 1px solid #ccc; background-color: #fff; top:41px; left:0px; overflow-y: auto; _overflow-y:auto !important; padding:0px; margin:0px; width: 100%; z-index:2014; display: none; } .self-select-wrapper .self-select-ul li{ list-style: none; } .self-select-ul .self-select-option{ line-height: 28px; cursor: pointer; display: block; padding-left:10px; text-decoration: none; color:#000; } .self-select-ul .self-select-option:hover, .self-select-ul .current{ background-color: #eee; }
js源码:
使用效果图:
第二个是之前省市联动的插件生成之后,调用自定义select生成的
自定义sleect优点:
开发中遇到的问题:
1.线性渐变
IE下使用filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#eeeeee);解决线性渐变问题,详解请参考下面的资料。
2.IE6 A 标签hover问题
IE6不设置href属性,不会触发:hover样式
3.IE 67 块级元素display:inline-block
4.z-index层级问题
改变处于active状态的自定select的z-index
5.css实现下三角,IE下透明问题
设置透明部分的style值为dashed即可。
border-style:solid dashed dashed dashed;
如果觉得有用,可以推荐给朋友哦,小编愿意和大家共同进步。
以上就是jquery制作select自定义样式的方法,希望大家喜欢。