ie浏览器不支持select option italic
博客专区 > Daim 的博客 > 博客详情
ie浏览器不支持select option italic
Daim 发表于2年前
ie浏览器不支持select option italic
  • 发表于 2年前
  • 阅读 9
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: ie浏览器不支持select option italic

由于项目需要,要实现select option斜体样式:

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

发现在ie8下根本不支持,chrom下可以。

后来查阅资料发现:

好吧,如果ie下非要select option 非要实现样式斜体,可以使用div+css方式模拟select:

<!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>

效果就自己试吧,不截图了。


  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 30
码字总数 7771
×
Daim
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: