美化下拉列表_JavaScript-js教程-PHP中文网

<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>
<p></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1972">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679986599613.png" alt="爱图表">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1972">爱图表</a>
                            <p>AI驱动的智能化图表创作平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="爱图表">
                                <span>99</span>
                            </div>
                        </div>
                        <a href="/ai/1972" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="爱图表">
                        </a>
                    </div>
                
<script language="JavaScript">

</script><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><button onclick="alert(a.getValue('s1') + '\n\n' + b.getValue('s2'))" class="CtlSelect"> Get value </button></p>
<p><script language="JavaScript">

</script></p>
<p></p>
<h4> description </h4>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">
//-------------------------------------------------------------
//  @ 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><div class="contentsignin">登录后复制</div></div>
<p></p>
<div class="copyright">
Power By blueDestiny, never-online
http://www.never-online.net
</div>

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

大家都在看：

Node.js怎么实现定时任务_Node.js定时任务实现与JS全栈自动化操作教程使用CSS为表单验证错误消息添加持久化图标 JavaScript WebAssembly集成与性能优化 React多层级列表的统一序号管理与键盘交互实现教程理解AJAX POST与传统表单POST：PHP页面数据处理与重定向的最佳实践