美化下拉列表

246 阅读 0 评论 163 点赞

我是靠谱客的博主缓慢心情，最近开发中收集的这篇文章主要介绍美化下拉列表，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> simulate combox control - http://www.never-online.net </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body, input
{
 font-family: verdana;
 font-size: 9pt;
}
h1
{
 font-family: tahoma;
 font-size: 22pt;
 text-align: left;
}
pre
{
 font-size: 9pt;
 font-family: verdana;
 border: 1px solid #006600;
 width: 400px;
 padding: 10px;
 background: #ffffff;
 color: #006600;
}
.CtlSelect
{
 border: 1px solid #006600;
 font-family: verdana;
 height: 20px;
 color: #006600;
 background: #ffffff;
 /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected
{
 background: #006600;
 color: #ffffff;
 height: 20px;
}
.unselected
{
 height: 20px;
 color: #006600;
 line-height: 120%;
 border-bottom: 1px solid #006600;
}
.CtlSelect1
{
 border: 1px solid #003399;
 font-family: verdana;
 height: 20px;
 color: #003399;
 background: #ffffff;
 /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected1
{
 background: #003399;
 color: #ffffff;
 height: 20px;
}
.unselected1
{
 height: 20px;
 color: #003399;
 line-height: 120%;
 border-bottom: 1px solid #003399;
}
.CtlSelect2
{
 border: 1px solid #990000;
 font-family: verdana;
 height: 20px;
 color: #990000;
 background: #ffffff;
 /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected2
{
 background: #990000;
 color: #ffffff;
 height: 20px;
}
.unselected2
{
 height: 20px;
 color: #990000;
 line-height: 120%;
 border-bottom: 1px solid #990000;
}
.copyright
{
 margin-top: 10px;
 font-size: 9pt;
 text-align: center;
 color: #333;
 font-weight: bold;
}
</style>
</HEAD></P>
<P><BODY>

<h1> simulate combox control </h1>
<h4> demonstrate </h4></P>
<P><p>
<select id="s0">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</p></P>
<P><p>
<select id="s1">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">1option1</option>
<option value="2">1option2</option>
<option value="3">1option3</option>
<option value="4">1option4</option>
<option value="5">1option5</option>
</select>
</p></P>
<P><p>
<select id="s2">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">2option1</option>
<option value="2">2option2</option>
<option value="3">2option3</option>
<option value="4">2option4</option>
<option value="5">2option5</option>
</select>
</p></P>
<P><p>
<select id="s3">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">3option1</option>
<option value="2">3option2</option>
<option value="3">3option3</option>
<option value="4">3option4</option>
<option value="5">3option5</option>
</select>
</p></P>
<P><button onclick="alert(a.getValue('s1') + 'nn' + b.getValue('s2'))" class="CtlSelect"> Get value </button></P>
<P></P>
<P><h4> description </h4>
<pre>
//-------------------------------------------------------------
//  @ Module: simulate select control, IE only.
//  @ Debug in: IE 6.0
//  @ Script by: blueDestiny, never-online
//  @ Updated: 2006-3-22
//  @ Version: 1.0 apha
//  @ Email: blueDestiny [at] 126.com
//  @ Website: http://www.never-online.net
//  @ Please Hold this item please.
//
//  API
//  @ simulateSelect(ctlSelIDs)
//    ctlSelIDs: select control IDs, split by ","
//
//  @ simulateSelect.style(ctlStyle[,selStyle][,unselStyle])
//    ctlStyle: main control combox css class name
//    selStyle: when mouseover or option focus css class name
//    unselStyle: options blur's css class name
//
//  @ simulateSelect.width=(widthPX)
//    widthPX must be a digit number.
//
//  @ simulateSelect.height=(heightPX)
//    heightPX must be a digit number.
//
//  -------------- for the next Version ----------
//  @ simulateSelect.readOnly = (blnReadOnly)
//    blnReadOnly must be a boolean type or a number type.
//  @ simulateSelect.addEvent(w, h)
//    w: fire handler's event.
//    h: handler function.
//-------------------------------------------------------------
</pre></P>
<P><div class="copyright">
Power By blueDestiny, never-online
http://www.never-online.net
</div>
</BODY>
</HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]