Select下拉列表控件美化

作者：biyuan 来源：biyuan's blog 时间：2008-11-12 12:55:00　

顽固的Select下拉列表，一般很难用css来控制样式

下面使用了js来美化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=gb2312"><title>Select控件美化 - asp之家 - www.aspxhome.com</title><style type="text/css">.Select_txt { background:#383931 url(select.gif) no-repeat right; font-size:12px; height:20px; line-height:20px; position:relative; z-index:1; text-indent:0.3em; border:1px solid #171814; cursor:default; color:#878884; text-align:left;}.Select_list { background:#383931; font-size:12px; position:absolute; z-index:2; text-indent:0.3em; border:1px solid #171814; line-height:20px; cursor:default; color:#878884; text-align:left;}.Select_list_over { background:#1A1B17;}.Select_list_out { background:#383931; position:relative; z-index:10;}select { position:relative; top:0px; left:0px;}</style><script language="JavaScript">function $(str){ return document.getElementById(str);}function addEvent() { if (!document.all){ arguments[0].addEventListener(arguments[1], arguments[2], false); } else { arguments[0].attachEvent("on" + arguments[1], arguments[2]); }}function delEvent() { if (!document.all){ arguments[0].removeEventListener(arguments[1], arguments[2], false); } else { arguments[0].detachEvent("on" + arguments[1], arguments[2]); }}function changeIndex(s, t){ $(t).selectedIndex = s; $("_select_" + t).innerHTML = $(t).options[$(t).selectedIndex].innerHTML; $("_select_txt_" + t).style.display = "none"; if($(t).onchange){ $(t).onchange(); }}function selectLoad(){ var sels = document.getElementsByTagName("select"); for(var i = 0; i < sels.length; i ++){ var txt = document.createElement("div"); txt.className = "Select_txt"; txt.style.width = sels[i].offsetWidth + "px"; txt.innerHTML = sels[i].options[sels[i].selectedIndex].innerHTML; txt.id = "_select_" + sels[i].id; var _txt = document.createElement("div"); _txt.className = "Select_list"; _txt.style.width = txt.style.width; _txt.style.top = sels[i].offsetTop + 20 + "px"; _txt.style.left = sels[i].offsetLeft + "px"; _txt.id = "_select_txt_" + sels[i].id; var ops = sels[i].options; for(var k = 0; k < ops.length; k ++){ _txt.innerHTML += "<div onmouseover=\"this.className='Select_list_over'\" onmouseout=\"this.className='Select_list_out'\" onclick=\"changeIndex(" + k + ", '" + sels[i].id + "')\">" + ops[k].innerHTML + "</div>"; } _txt.style.display = "none"; document.body.appendChild(_txt); txt.onclick = new Function("$('_select_txt_" + sels[i].id + "').style.display=$('_select_txt_" + sels[i].id + "').style.display=='block'?'none':'block';"); sels[i].parentNode.insertBefore(txt, sels[i].nextSibling); sels[i].style.display = "none"; }}addEvent(window, "load", selectLoad);</script></head><body><form><table border="0"><tr><td> <select onchange="alert(value)" id="select1"> <option value="1">选项1</option> <option value="2" selected>选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> <option value="我就是我">选项</option> </select></td></tr><tr><td> <select onchange="alert(value)" id="select2"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">这个选项再长点</option> </select></td></tr></table></form></body></html>

标签：Select,美化,下拉列表

投稿

Select下拉列表控件美化

猜你喜欢

详解MySql基本查询、连接查询、子查询、正则表达查询

Python中的zipfile模块使用详解

详解MySQL与Spring的自动提交(autocommit)

go格式“占位符”输入输出类似python的input

windows下MySQL5.6版本安装及配置过程附有截图和详细说明

Python中typing模块的具体使用

Vue SPA 初次进入加载动画实现代码

对python中arange()和linspace()的区别说明

ASP截取中英文字符串固定长度

Python3 基础语法详解

Python利用tkinter和socket实现端口扫描

如何从IP获知其所在地？

Centos 7下使用RPM包安装MySQL 5.7.9教程

python 统计代码行数简单实例

Python实现获取sonarqube数据

python+tifffile之tiff文件读写方式

PyTorch中可视化工具的使用

mysql报错：MySQL server version for the right syntax to use near type=InnoDB的解决方法

浅析MySQL数据库授权原则

Python中的函数参数(位置参数、默认参数、可变参数)

Select下拉列表控件美化

猜你喜欢

详解MySql基本查询、连接查询、子查询、正则表达查询

Python中的zipfile模块使用详解

详解MySQL与Spring的自动提交(autocommit)

go格式“占位符”输入输出 类似python的input

windows下MySQL5.6版本安装及配置过程附有截图和详细说明

Python中typing模块的具体使用

Vue SPA 初次进入加载动画实现代码

对python中arange()和linspace()的区别说明

ASP截取中英文字符串固定长度

Python3 基础语法详解

Python利用tkinter和socket实现端口扫描

如何从IP获知其所在地？

Centos 7下使用RPM包安装MySQL 5.7.9教程

python 统计代码行数简单实例

Python实现获取sonarqube数据

python+tifffile之tiff文件读写方式

PyTorch中可视化工具的使用

mysql报错：MySQL server version for the right syntax to use near type=InnoDB的解决方法

浅析MySQL数据库授权原则

Python中的函数参数(位置参数、默认参数、可变参数)

go格式“占位符”输入输出类似python的input