怎样才能让form 的select的滚动条变色？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

select的滚动条样式不能改，只能用层模拟
select的滚动条样式不能改，css中又很多属性对select无效。
1.select的滚动条样式跟随页面Body的滚动条样式
<STYLE type="text/css"></STYLE>
2. 用层+JS来模拟实现Select的功能，那就可以随心所欲的定义样式
就看JS的复杂程度如何了
是的。body的样式对select无用。我试过。不行的，所以，来问大家。
我也试图用<div>来模拟。可我的JS不太好。好像是用Object.style.scrollbarBasecolor=#xxxxxx.其中Object是谋一个对象。
可就是实现不了。
能不能具体一点说。最好，举个具体的例子。急！！谢谢~~~`
<STYLE type="text/css">
BODY {
scrollbar-base-color: lightblue;
}
</STYLE>
<script>
str="";
mywidth=0;
lastobj=null;
function showdiv(w,h)
{
document.all.mysel.style.display="none";
str="<input type=text style='width:"+w+";border:1 solid #000000;' readOnly onclick=showlist() value="+document.all.mysel.options[document.all.mysel.selectedIndex].text+">";
if(document.all.mysel.size!="")
liststr="<table style='border:0' width="+(w-20)+" cellspacing=0 cellpadding=0>";
else
liststr="<table style='border:1 solid #000000;' width="+w+" cellspacing=0 cellpadding=0>";
for(i=0;i<document.all.mysel.options.length;i++)
liststr+="<tr><td style='font-size:10pt' onmouseover=myover() onmouseout=myout() onclick=myclick("+i+")>"+document.all.mysel.options[i].text+"</td></tr>";
liststr+="</table>";
if(document.all.mysel.size!="")
{
likesel.style.width=w-20;
likesel.style.height=h;
likesel.style.borderLeft="1 solid #000000";
if(document.all.mysel.size>=document.all.mysel.options.length)
likesel.style.borderRight="1 solid #000000";
likesel.style.borderTop="1 solid #000000";
likesel.style.borderBottom="1 solid #000000";
likesel.innerHTML=liststr;
}
else
likesel.innerHTML=str;
mywidth=w;
}function showlist()
{
likesel.innerHTML+=liststr;
}
function myover()
{
event.srcElement.style.cursor="default";
if(document.all.mysel.size!="")
return;
event.srcElement.style.color="white";
event.srcElement.style.background="darkblue";
}
function myout()
{
if(document.all.mysel.size!="")
return;
event.srcElement.style.color="";
event.srcElement.style.background="";
}
function myclick(j)
{
document.all.mysel.selectedIndex=j;
if(document.all.mysel.size!="")
{
if(lastobj!=null)
{
lastobj.style.color="";
lastobj.style.background="";
}
event.srcElement.style.cursor="default";
event.srcElement.style.color="white";
event.srcElement.style.background="darkblue";
lastobj=event.srcElement;
}
else
{
str="<input type=text style='width:"+mywidth+";border:1 solid #000000;' readOnly onclick=showlist() value="+document.all.mysel.options[document.all.mysel.selectedIndex].text+">";
likesel.innerHTML=str;
}
}
</script>
<body onload="showdiv(mysel.offsetWidth,mysel.offsetHeight)">
<select name=mysel size=4>
<option value=11 selected>1111111
<option value=12>111112
<option value=13>1111111113
<option value=14>45465113
<option value=15>888888888113
<option value=16>1000
</select>
<div id=likesel style="overflow-y:auto"><div>
看看下面的
<HTML>
  <HEAD>
    <STYLE>
      TEXTAREA.Blue3dLight  { scrollbar-3d-light-color:blue }
    </STYLE>
  </HEAD>
  <BODY>
    <TEXTAREA CLASS="Blue3dLight">The top and left edges of the
      thumb and button-face elements in the scroll bar for this
      element will be blue.</TEXTAREA>
  </BODY>
</HTML>