文档章节

ie浏览器不支持select option italic

Daim
 Daim
发布于 2015/11/26 17:15
字数 405
阅读 13
收藏 0

由于项目需要,要实现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>

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


© 著作权归作者所有

共有 人打赏支持
Daim
粉丝 2
博文 32
码字总数 7771
作品 0
海淀
高级程序员
Html5添加超酷响应式表单美化模板插件教程

一、Html结构 <form class="cbp-mc-form"> <div class="cbp-mc-column"> <label for="firstname">First Name</label> <input type="text" id="firstname" name="firstname" placeholder="Jon......

大街小巷
2016/01/05
31
0
IE浏览器select-option不支持display属性

IE浏览器的select下的option display属性是不生效的 比如 上方HTML 代码在IE 和 chrome(FF等) 浏览器表现是不一样的 IE中select下有3个option都展现出来了,FF和Chrome等则只展现了2个,第二...

chro008
2016/08/08
0
0
select 动态写入onchange属性

我写了一个select级联,如下: 请选择编码前缀 请选择编码级

飞天苹果
2012/12/25
2.2K
2
WEB前端:HTML+CSS+JavaScript

一、 HTML介绍: --------------------------------------- 什么是HTML? 超文本标记语言, <标签名>--标记(标签、节点) HTML是由:标签和内容构成 3. 程序语言有两种:解释性语言(HTML、P...

zqwang121
2016/06/17
46
0
在js中不能使用el表达式的解决方法

如果是单独的js文件,el表达式是不起作用的,EL表达式是在服务端执行的,服务端执行完成后再传给客户端的,js是在客户端执行的,el在js前就被执行了把引入的外部js改为jsp文件,然后在jsp页面...

习惯了-想你
2016/12/13
21
0

没有更多内容

加载失败,请刷新页面

加载更多

创建第一个react项目

sudo npm i -g create-react-app@1.5.2 create-react-app react-app cd react-apprm -rf package-lock.jsonrm -rf node_modules #主要是为了避免报错npm installnpm start......

lilugirl
今天
1
0
在浏览器中进行深度学习:TensorFlow.js (八)生成对抗网络 (GAN)

Generative Adversarial Network 是深度学习中非常有趣的一种方法。GAN最早源自Ian Goodfellow的这篇论文。LeCun对GAN给出了极高的评价: “There are many interesting recent development...

naughty
今天
0
0
搬瓦工镜像站bwh1.net被DNS污染,国内打不开搬瓦工官网

今天下午(2018年10月17日),继搬瓦工主域名bandwagonhost.com被污染后,这个国内的镜像地址bwh1.net也被墙了。那么目前应该怎么访问搬瓦工官网呢? 消息来源:搬瓦工优惠网->搬瓦工镜像站b...

flyzy2005
今天
3
0
SpringBoot自动配置

本篇介绍下,如何通过springboot的自动配置,将公司项目内的依赖jar,不需要扫描路径,依赖jar的情况下,就能将jar内配置了@configuration注解的类,创建到IOC里面 介绍下开发环境 JDK版本1.8 spr...

贺小五
今天
3
0
命令行新建Maven多项目

参考地址 # DgroupId 可以理解为包名# DartifactId 可以理解为项目名mvn archetype:generate -DgroupId=cn.modfun -DartifactId=scaffold -DarchetypeArtifactId=maven-archetype-quickst......

阿白
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部