html中select样式兼容,ul模拟select下拉框样式解决原生select的css兼容问题

最近项目用到了下拉菜单，又不想引入其他UI框架来实现，在网上查了好久能不能用css+js来兼容select在各个浏览器的不适应，答案是否定的！无法兼容，这条路宣告堵死，其实还是因为自己懒不愿意自己做，不要在意这些细节，回到正题。

所以又开始查了第二方案，自定义下拉框来仿select，还是不够理想，网上的帖子不是做的太丑就是bug太多，那我打算找个好看的样式改改功能吧。

仿select下拉框样式

样式为图片的效果原链接在这，我花了20分钟做了样式优化和功能修改(因为有bug，咳咳)，下面放出修改后的代码

/*css*/

/*通用样式*/

body{

background: #FFBD1E;

}

ul,li{

list-style: none;

padding: 0;

margin: 0;

}

/*下拉框样式*/

#select{

margin:100px;

background: rgba(0,0,0,0);

width: 249px;

height: 40px;

font-family: "微软雅黑";

font-size: 18px;

color: white;

border: 1px #1a1a1a solid;

border-radius: 5px;

}

.select-head{

overflow: hidden;

width: 249px;

height: 40px;

box-sizing: border-box;

padding: 0 10px;

line-height: 40px;

}

.select-head .select-head-cont{

float: left;

}

.select-head .select-icon{

float: right;

}

.option{

text-indent: 10px;

margin-top: 1px;

width: 249px;

color: black;

background: rgba(236,111,111,0.1);

line-height: 25px;

border: 1px #cfcfcf solid;

display: none;

}

.option-item:hover{

background: rgba(204,106,67,0.3);

}

.click_bg{

background: rgba(204,106,67,0.3);

}

.rotate {

transform-origin: center center;

/* //旋转中心要是正中间 才行*/

transform: rotate(180deg);

-webkit-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-o-transform: rotate(180deg);

transition: transform 0.2s;

-moz-transition: -moz-transform 0.2s;

-moz-transition: -moz-transform 0.2s;

-o-transition: -o-transform 0.2s;

-ms-transition: -ms-transform 0.2s;

}

.rotate1 {

transform-origin: center center;

transform: rotate(0deg);

/*//返回原点*/

-webkit-transform: rotate(0deg);

-moz-transform: rotate(deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

transition: transform 0.2s;

-moz-transition: -moz-transform 0.2s;

-moz-transition: -moz-transform 0.2s;

-o-transition: -o-transform 0.2s;

-ms-transition: -ms-transform 0.2s;

}

• ▼

  • chrome
  • safari
  • Edge
  • firefox
  • ie8

//初始化赋值

$('.select-head .select-head-cont').html($('.option li').eq(0).html());

//点击弹出下拉列表

$('.select-head').click(function(event){

event.stopPropagation();//阻止冒泡~必须条件！！

$('.option').slideToggle();

//箭头动画

if($('.select-icon').hasClass('rotate')){

$('.select-icon').addClass('rotate1').removeClass('rotate');

}else {

$('.select-icon').removeClass('rotate1').addClass('rotate');

}

});

//选中后赋值

$('.option li').click(function(){

console.log($(this).index());

$(this).addClass('click_bg').siblings().removeClass('click_bg');

$('.select-head .select-head-cont').html($('.option li').eq($(this).index()).html());

$('.select-head .select-icon').addClass('rotate1').removeClass('rotate');

});

//点击下拉菜单之外隐藏列表

$(document).click(function(){

$(".option").hide();

$('.select-icon').addClass('rotate1').removeClass('rotate');

});

复制这段代码就能看到它的效果了，快来试试吧~~要是觉得不错给我点颗心吧(＾－＾)V