网站美化下拉列表的操作方法

2018-12-25 08:23:29来源：爱站网阅读 ()

很多程序员都会接触到建站，建站到一定的阶段后都要进行网站的美化，不管是页面的美化还是美化下拉列表，下面是爱站技术频道小编为大家整理的操作方法，一起来了解一下吧！

<!doctype html="" public=""><html><head><title> simulate combox control - http://www.never-online.net</title>



<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><br /></p><body><p>
</p><h1> simulate combox control</h1><p><br /></p><h4> demonstrate</h4><p><br /></p><p><br /></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><br /></p><p><br /></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><br /></p><p><br /></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><br /></p><p><br /></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><br /></p><p><button class="CtlSelect" data-cke-pa-onclick="alert(a.getValue('s1') + '\n\n' + b.getValue('s2'))"> Get value</button></p><p><br /></p><p></p><p><br /></p><p><br /></p><h4> description</h4><p><br /></p><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><br /></p><p><br /></p><div class="copyright">
Power By blueDestiny, never-online
http://www.never-online.net</div><p><br /></p></body></html>
</!doctype>

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有