您正在使用 IPV4 [18.97.14.83] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会      

【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中      
[公益] 地球是我家,绿化靠大家      
2026年 情人节 003
2026年 元宵节 020
2027年 元 旦 324
2026年 春 节 006
综合数码金融娱乐服务报刊政府机构 推荐 排名 今日 申请 友情  
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
更换select下拉菜单背景样式的实现代码
内容摘要: style.uboxstyle{width:174px;height:39px;float:right;}#uboxstyle{width:174px;height:39px;float:right;}#uboxstyle.select_box{width:174px;height:39px;float:left;}#uboxstylediv.tag_sel......
<style>

.uboxstyle{width:174px;height:39px;float:right;}

#uboxstyle{width:174px;height:39px;float:right;}

#uboxstyle.select_box{width:174px;height:39px;float:left;}

#uboxstylediv.tag_select{display:block;color:#79A2BD;width:174px;height:39px;background:transparenturl("images/select01.jpg")no-repeat00;padding:010px;line-height:39px;}

#uboxstylediv.tag_select_hover{display:block;color:#79A2BD;width:174px;height:39px;background:transparenturl("images/select01.jpg")no-repeat00;padding:010px;line-height:39px;}

#uboxstylediv.tag_select_open{display:block;color:#79A2BD;width:174px;height:39px;background:transparenturl("images/select01.jpg")no-repeat00px;padding:010px;line-height:39px;}

#uboxstyleul.tag_options{padding:0;margin:0;list-style:none;width:174px;padding:005px;margin:0;}

#uboxstyleul.tag_optionsli{display:block;width:174px;padding:010px;height:30px;text-decoration:none;line-height:30px;color:#79A2BD;text-align:left;}

#uboxstyleul.tag_optionsli.open_hover{color:#000}

#uboxstyleul.tag_optionsli.open_selected{color:#000}

</style>

<scriptlanguage="JavaScript">

varselects=document.getElementsByTagName('select');

varisIE=(document.all&&window.ActiveXObject&&!window.opera)?true:false;

function$(id){

returndocument.getElementById(id);

}

functionstopBubbling(ev){

ev.stopPropagation();

}

functionrSelects(){

for(i=0;i<selects.length;i++){

selects[i].style.display='none';

select_tag=document.createElement('div');

select_tag.id='select_'+selects[i].name;

select_tag.className='select_box';

selects[i].parentNode.insertBefore(select_tag,selects[i]);

select_info=document.createElement('div');

select_info.id='select_info_'+selects[i].name;

select_info.className='tag_select';

select_info.style.cursor='pointer';

select_tag.appendChild(select_info);

select_ul=document.createElement('ul');

select_ul.id='options_'+selects[i].name;

select_ul.className='tag_options';

select_ul.style.position='absolute';

select_ul.style.display='none';

select_ul.style.zIndex='999';

select_tag.appendChild(select_ul);

rOptions(i,selects[i].name);

mouseSelects(selects[i].name);

if(isIE){

selects[i].onclick=newFunction("clickLabels3('"+selects[i].name+"');window.event.cancelBubble=true;");

}

elseif(!isIE){

selects[i].onclick=newFunction("clickLabels3('"+selects[i].name+"')");

selects[i].addEventListener("click",stopBubbling,false);

}

}

}

functionrOptions(i,name){

varoptions=selects[i].getElementsByTagName('option');

varoptions_ul='options_'+name;

for(n=0;n<selects[i].options.length;n++){

option_li=document.createElement('li');

option_li.style.cursor='pointer';

option_li.className='open';

$(options_ul).appendChild(option_li);

option_text=document.createTextNode(selects[i].options[n].text);

option_li.appendChild(option_text);

option_selected=selects[i].options[n].selected;

if(option_selected){

option_li.className='open_selected';

option_li.id='selected_'+name;

$('select_info_'+name).appendChild(document.createTextNode(option_li.innerHTML));

}

option_li.onmouseover=function(){this.className='open_hover';}

option_li.onmouseout=function(){

if(this.id=='selected_'+name){

this.className='open_selected';

}

else{

this.className='open';

}

}

option_li.onclick=newFunction("clickOptions("+i+","+n+",'"+selects[i].name+"')");

}

}

functionmouseSelects(name){

varsincn='select_info_'+name;

$(sincn).onmouseover=function(){if(this.className=='tag_select')this.className='tag_select_hover';}

$(sincn).onmouseout=function(){if(this.className=='tag_select_hover')this.className='tag_select';}

if(isIE){

$(sincn).onclick=newFunction("clickSelects('"+name+"');window.event.cancelBubble=true;");

}

elseif(!isIE){

$(sincn).onclick=newFunction("clickSelects('"+name+"');");

$('select_info_'+name).addEventListener("click",stopBubbling,false);

}

}

functionclickSelects(name){

varsincn='select_info_'+name;

varsinul='options_'+name;

for(i=0;i<selects.length;i++){

if(selects[i].name==name){

if($(sincn).className=='tag_select_hover'){

$(sincn).className='tag_select_open';

$(sinul).style.display='';

}

elseif($(sincn).className=='tag_select_open'){

$(sincn).className='tag_select_hover';

$(sinul).style.display='none';

}

}

else{

$('select_info_'+selects[i].name).className='tag_select';

$('options_'+selects[i].name).style.display='none';

}

}

}

functionclickOptions(i,n,name){

varli=$('options_'+name).getElementsByTagName('li');

$('selected_'+name).className='open';

$('selected_'+name).id='';

li[n].id='selected_'+name;

li[n].className='open_hover';

$('select_'+name).removeChild($('select_info_'+name));

select_info=document.createElement('div');

select_info.id='select_info_'+name;

select_info.className='tag_select';

select_info.style.cursor='pointer';

$('options_'+name).parentNode.insertBefore(select_info,$('options_'+name));

mouseSelects(name);

$('select_info_'+name).appendChild(document.createTextNode(li[n].innerHTML));

$('options_'+name).style.display='none';

$('select_info_'+name).className='tag_select';

selects[i].options[n].selected='selected';

}

window.onload=function(e){

bodyclick=document.getElementsByTagName('body').item(0);

rSelects();

bodyclick.onclick=function(){

for(i=0;i<selects.length;i++){

$('select_info_'+selects[i].name).className='tag_select';

$('options_'+selects[i].name).style.display='none';

}

}

}

</script>

<divstyle="width:500px;">

<formid="form1"name="form1"method="post"action="?Action=Select"style="padding:0px;">

<divstyle="width:200px;float:left;text-align:left;margin-top:8px;">

<divid="uboxstyle">

<selectname="select1"id="language">

<optionvalue="1">Cars...</option>

</select>

</div>

</div>

<divstyle="width:200px;float:left;text-align:left;margin-top:8px;">

<divid="uboxstyle">

<selectname="select2"id="language2">

<optionvalue="">all</option>

</select>

</div>

</div>

<divstyle="width:100px;float:left">

<inputtype="submit"name="button"id="button"value=""style="background-image:url(images/selectbt.jpg);width:92px;height:38px;border:0px;cursor:hand;"/>

</div>

</form></div>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:CSS设置多行文本垂直居中的方法

 

下一篇:停止共享Win11文件夹三种方法

发布日期:2023/12/7
手机扫二维码直达本页
发布时间:10:44:08
点  击:16
录  入:星儿
相关文章
Baidu
YiJiaCMS 7.9.7 build260125(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,腾讯云提供加速防护
运行时间载入中.....