select 通过css不好控制,可以使用javascript+css来模拟。
脚本小编为大家收集了一个jquery模拟select下拉菜单的例子,大家可以借鉴下别人的经验。
1,html部分
 
2,css代码部分
 
3,js脚本部分
 
(function($){  
jquery.fn.select = function(options){  
return this.each(function(){  
var $this = $(this);  
var $shows = $this.find(".shows");  
var $selectoption = $this.find(".selectoption");  
var $el = $this.find("ul > li");  
  
$this.click(function(e){  
    $(this).toggleclass("zindex");  
    $(this).children("ul").toggleclass("dis");  
    e.stoppropagation();  
});  
  
$el.bind("click",function(){  
    var $this_ = $(this);  
       
    $this.find("span").removeclass("gray");  
    $this_.parent().parent().find(".selectoption").text($this_.text());  
});  
  
$("body").bind("click",function(){  
    $this.removeclass("zindex");  
    $this.find("ul").removeclass("dis");      
})  
//eahc end    
 });  
 } 
})(jquery);   
  
//调用 
$(".selectcontainer").select();  
 
实现模拟select效果,网页中select数量不限,需要导入jquery.js。