ie瀏覽器不支持select option italic

時間 2019-11-17

原文原文鏈接

因爲項目須要，要實現select option斜體樣式：javascript

<option style="font-style:italic;" value="1">1</option>css

發如今ie8下根本不支持，chrom下能夠。html

後來查閱資料發現：java

好吧，若是ie下非要select option 非要實現樣式斜體，可使用div+css方式模擬select:jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

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;}


</style>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
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");
	
});
</script>
</head>
<body>
<form action="" method="post">
  <div id="selectid" class="divselect">
		<input name="" type="hidden" value="" id="#inputid"/>
		<select name="s1" style="display:none;">
		</select>
      <cite></cite>
      <ul>
         <li><a href="javascript:;" selectid=""></a></li>
         <li><a href="javascript:;" selectid="Y">Y</a></li>
         <li><a href="javascript:;" selectid="N" style="font-style:italic;">N</a></li>
         <li><a href="javascript:;" selectid="NA">NA</a></li>
         
      </ul>
  </div>
</form>
</div>
</body>
</html>

效果就本身試吧，不截圖了。ide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。