文档章节

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
WEB前端:HTML+CSS+JavaScript

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

zqwang121
2016/06/17
46
0
select 动态写入onchange属性

我写了一个select级联,如下: 请选择编码前缀 请选择编码级别 方法是:jquery-1.7.min.js function selectPrefix(){ $("#select_level").append("1").append("2"); $("#select_level").att......

飞天苹果
2012/12/25
2.5K
2
c#开发之一---前端技术html/css

苏州IT之家群:46213669,技术交流,招聘就业,职业发展,欢迎苏州IT人士加入。 第一部分:html 表单标签: 1、 form //把表单中的内容提交到服务器中www.loready.cn/mothd.aspx文件。 2、I...

kuang_hp
2018/07/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux Wireshark普通用户启动使用方案

当系统安装好Wireshark后请正常启动是否可以进行正常使用,如果不行请参考下列指导 向系统添加一个用户组 sudo groupadd wireshark //如提示此组存在可跳过 将指定用户添加到这个组中 sudo...

CHONGCHEN
今天
2
0
CSS 选择器参考手册

CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。...

Jack088
今天
2
0
数据库篇一

数据库篇 第1章 数据库介绍 1.1 数据库概述  什么是数据库(DB:DataBase) 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据...

stars永恒
今天
4
0
Intellij IDEA中设置了jsp页面,但是在访问页面时却提示404

在Intellij IDEA中设置了spring boot的jsp页面,但是在访问时,却出现404,Not Found,经过查找资料后解决,步骤如下: 在Run/Debug Configurations面板中设置该程序的Working Directory选项...

uknow8692
昨天
4
0
day24:文档第五行增内容|每月1号压缩/etc/目录|过滤文本重复次数多的10个单词|人员分组|

1、在文本文档1.txt里第五行下面增加如下内容;两个方法; # This is a test file.# Test insert line into this file. 分析:给文档后增加内容,可以用sed 来搞定;也可以用while do done...

芬野de博客
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部