由于项目需要,要实现select option斜体样式:
1
发现在ie8下根本不支持,chrom下可以。
后来查阅资料发现:
好吧,如果ie下非要select option 非要实现样式斜体,可以使用div+css方式模拟select:
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
body,ul,li{ margin:0; padding:0; font-size:13px;}
ul,li{list-style:none;}
.divselect{width:52px; margin:80px auto; position:relative; z-index:10000;}
.divselect cite{ height:24px;line-height:24px; display:block; cursor:pointer;font-style:normal;
padding-left:4px; padding-right:30px; border:1px solid #333333;
background:url(xjt.png) no-repeat right center;}
.divselect ul{width:50px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:20000; margin-top:-1px; display:none;}
.divselect ul li{height:24px; line-height:24px;}
.divselect ul li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;}
.divselect ul li a:hover{background-color:#CCC;}
jQuery.divselect = function(divselectid,inputselectid) {
var inputselect = $(inputselectid);
$(divselectid+" cite").click(function(){
var ul = $(divselectid+" ul");
if(ul.css("display")=="none"){
ul.slideDown("fast");
}else{
ul.slideUp("fast");
}
});
$(divselectid+" ul li a").click(function(){
var txt = $(this).text();
$(divselectid+" cite").html(txt);
$(divselectid+" cite").attr("style",$(this).attr("style"));
$(divselectid+" cite").css("background-color","#CCC");
$(divselectid+" cite").focus();
var value = $(this).attr("selectid");
inputselect.val(value);
$(divselectid+" ul").hide();
window.event.cancelBubble = true;
});
$(document).click(function(){
$(divselectid+" ul").hide();
$(divselectid+" cite").css("background-color","");
});
};
$(function(){
$.divselect("#selectid","#inputid");
});
- Y
- N
- NA