文档章节

ie浏览器不支持select option italic

Daim
 Daim
发布于 2015/11/26 17:15
字数 405
阅读 9
收藏 0
点赞 0
评论 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
429
0
WEB前端:HTML+CSS+JavaScript

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

zqwang121
2016/06/17
46
0
c#开发之一---前端技术html/css

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

kuang_hp
07/04
0
0
select 动态写入onchange属性

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

飞天苹果
2012/12/25
2.2K
2
selenium之WebDriver

1、什么情况下选用WebDriver? (1)Selenium-1.0不支持的浏览器功能。 (2)multiple frames, multiple browser windows, popups, and alerts. (3)页面导航。 (4)下拉。 (5)基于AJAX的...

李长春
2011/07/20
0
3
在js中不能使用el表达式的解决方法

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

习惯了-想你
2016/12/13
21
0
HTML--入门到精通实用最全

一:认识HTML: 网页一般又称HTML(Hyper Text Mark-up Language )文件,即超文本标记语言( 用于描述网页文档的一种标记语言。)。是一种在www上传输、能被浏览器认识和翻译成页面并显示出...

我是宁采臣
2016/12/07
0
0
IE提交表单的input文件上传 上传之后怎么清空该input的数据

发现这个清空input的方法,在IE浏览器下不支持,其他浏览器就可以,由于不可以通过清空form的方法处理,好多网上的方案都实现不了,因为form还有其他数据的,不可以把整个form清空. 我的实现是这样...

codingjava
2015/11/24
1K
0
Jquery 操作Html 控件 CheckBox、Radio、Select 控件

在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox、radio、select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一个全面的代码总结。 一、J...

heiyexue
2014/06/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

keepalived配置高可用集群

Linux集群概述 根据功能划分为两大类:高可用和负载均衡 高可用集群通常为两台服务器,一台工作,另外一台作为冗余,当提供服务的机器宕机,冗余将接替继续提供服务 实现高可用的开源软件有:...

TaoXu
11分钟前
0
0
mysql联表批处理操作

1 概述 mysql中的单表增删改查操作,可以说是基本中的基本. 实际工作中,常常会遇到一些基本用法难以处理的数据操作,譬如遇到主从表甚至多级关联表的情况(如一些历史问题数据的批量处理),考虑到...

社哥
14分钟前
0
0
IntelliJ IDEA 详细图解最常用的配置,适合刚刚用的新人。

刚刚使用IntelliJ IDEA 编辑器的时候,会有很多设置,会方便以后的开发,磨刀不误砍柴工。 比如:设置文件字体大小,代码自动完成提示,版本管理,本地代码历史,自动导入包,修改注释,修改...

kim_o
28分钟前
0
0
Google Java编程风格指南

目录 前言 源文件基础 源文件结构 格式 命名约定 编程实践 Javadoc 后记 前言 这份文档是Google Java编程风格规范的完整定义。当且仅当一个Java源文件符合此文档中的规则, 我们才认为它符合...

niithub
30分钟前
0
0
java.net.MalformedURLException异常说明

1.异常片段 Java代码中,在进行URL url = new URL(urllink)操作时,提示以下异常信息,该类异常主要问题出在参数urllink上面。 异常片段1 java.net.MalformedURLException at java.ne...

lqlm
31分钟前
0
0
CentOS7修改mysql5.6字符集

解决办法:CentOS7下修改MySQL数据库字符编码为UTF-8,UTF-8包含全世界所有国家所需要的字符集,是国际编码。 具体操作如下: 1.进入MySQL [root@tianqi-01 ~]# mysql -uroot -p Enter passw...

河图再现
32分钟前
0
0
DevExpress v18.1新版亮点——WPF篇(一)

用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容。本文将介绍了DevExpress WPF v18.1 的新功能,快来下载试用新版本!点击下载>> Accordion Co...

Miss_Hello_World
35分钟前
0
0
Rancher 2.0集群与工作负载告警

Rancher 2.0操作指南。本文将step by step演示如何使用Rancher 2.0中集成的告警功能,包括设置通知程序、设置集群级别以及工作负载级别的告警。 在Rancher 1.x时期,告警功能是很多Rancher用...

RancherLabs
39分钟前
1
0
Python中字符串拼接的N中方法

python拼接字符串一般有以下几种方法: ①直接通过(+)操作符拼接 s = 'Hello'+' '+'World'+'!'print(s) 输出结果:Hello World! 使用这种方式进行字符串连接的操作效率低下,因为python中...

木头释然
41分钟前
9
0
JAVA排序之归并排序

归并排序思路就是不停拆分数组,直到拆成一个一个元素,之后将拆出来的元素按照拆分顺序反过来的顺序合并,出现前边值大于后边值,则换位置,放入临时数组,最后将临时数组覆盖原数组. public stat...

勤奋的蚂蚁
53分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部