求Select自定义样式解决思路
日期：2014-05-18 浏览次数：20417 次
求Select自定义样式
第一个满意者给全分
------解决方案--------------------
用js控制
------解决方案--------------------
只有用js重写了
用一个div加图片模拟吧
网上有现成的控件 你可以搜一下
------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> </title>
<style type= "text/css ">
<!--
.n1 {
border-right: 1px none #999999;
border-top: 1px solid #999999;
border-bottom: 1px solid #DBDBDB;
border-left: 1px solid #999999;
cursor: default;
width:80px
}
.n2 {
background: url( <a href= "http://www.blueidea.com/bbs/images/newwin.gif " target= "_blank "> http://www.blueidea.com/bbs/images/newwin.gif </a> ) no-repeat center center;
border-top: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #DBDBDB;
border-left: 1px none;
width: 18px;
cursor: default;
}
.ss {
color: #FFFFFF;
background: #0A246A;
}
-->
</style>
<STYLE>
BODY {
SCROLLBAR-FACE-COLOR: #d80000;
SCROLLBAR-HIGHLIGHT-COLOR: #0000fc;
SCROLLBAR-SHADOW-COLOR: #24fc90;
SCROLLBAR-ARROW-COLOR: #fcfc48;
SCROLLBAR-TRACK-COLOR: #002400;
SCROLLBAR-DARKSHADOW-COLOR: #00b448;
SCROLLBAR-BASE-COLOR: #fc0000
}
</STYLE>
<script lanuage= "JScript ">
function turnit(ss)
{
if (ss.style.display== "none ")
{ss.style.display= " ";
}
else
{ss.style.display= "none ";
}
}
function sele(tid)
{
bb.style.display= 'none ';
text1.value=tid.innerText;
}
function over(tid)
{
for (var i=1;i <4;i++)
{
eval( 't '+i).className= ' '
}
tid.className= 'ss '
}
function out(tid)
{
if (bb.style.display!= 'none ')
tid.className= ' '
}
</script>
<style type= "text/css ">
<!--
table {
font-size: 9pt;
}
-->
</style>
</head>
<body>
<table width= "98 " border= "0 " cellspacing= "0 " cellpadding= "0 ">
<tr>
<td width= "98 " nowrap>
<input name= "text1 " type= "text " size= "10 " class=n1 readonly value=请选择 onclick=turnit(bb)> <input name= "Submit " type= "text " class= "n2 " value= " " readonly onclick=turnit(bb)>
</td>
</tr>
<tr>
<td id=bb style=display:none> <div id= "Layer1 " style= "position:absolute; width:98px; height:100px; overflow: scroll; overflow-x:hidden; z-index: 1; " class= "n1 " >
<table width= "100% " border= "0 " cellpadding= "0 " cellspacing= "0 " id=tb>
<tr>
<td id=t1 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this)> 选择1 </td>
</tr>
<tr>
<td id=t2 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this)> 选择2 </td>
</tr>
<tr>
<td
第一个满意者给全分
------解决方案--------------------
用js控制
------解决方案--------------------
只有用js重写了
用一个div加图片模拟吧
网上有现成的控件 你可以搜一下
------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> </title>
<style type= "text/css ">
<!--
.n1 {
border-right: 1px none #999999;
border-top: 1px solid #999999;
border-bottom: 1px solid #DBDBDB;
border-left: 1px solid #999999;
cursor: default;
width:80px
}
.n2 {
background: url( <a href= "http://www.blueidea.com/bbs/images/newwin.gif " target= "_blank "> http://www.blueidea.com/bbs/images/newwin.gif </a> ) no-repeat center center;
border-top: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #DBDBDB;
border-left: 1px none;
width: 18px;
cursor: default;
}
.ss {
color: #FFFFFF;
background: #0A246A;
}
-->
</style>
<STYLE>
BODY {
SCROLLBAR-FACE-COLOR: #d80000;
SCROLLBAR-HIGHLIGHT-COLOR: #0000fc;
SCROLLBAR-SHADOW-COLOR: #24fc90;
SCROLLBAR-ARROW-COLOR: #fcfc48;
SCROLLBAR-TRACK-COLOR: #002400;
SCROLLBAR-DARKSHADOW-COLOR: #00b448;
SCROLLBAR-BASE-COLOR: #fc0000
}
</STYLE>
<script lanuage= "JScript ">
function turnit(ss)
{
if (ss.style.display== "none ")
{ss.style.display= " ";
}
else
{ss.style.display= "none ";
}
}
function sele(tid)
{
bb.style.display= 'none ';
text1.value=tid.innerText;
}
function over(tid)
{
for (var i=1;i <4;i++)
{
eval( 't '+i).className= ' '
}
tid.className= 'ss '
}
function out(tid)
{
if (bb.style.display!= 'none ')
tid.className= ' '
}
</script>
<style type= "text/css ">
<!--
table {
font-size: 9pt;
}
-->
</style>
</head>
<body>
<table width= "98 " border= "0 " cellspacing= "0 " cellpadding= "0 ">
<tr>
<td width= "98 " nowrap>
<input name= "text1 " type= "text " size= "10 " class=n1 readonly value=请选择 onclick=turnit(bb)> <input name= "Submit " type= "text " class= "n2 " value= " " readonly onclick=turnit(bb)>
</td>
</tr>
<tr>
<td id=bb style=display:none> <div id= "Layer1 " style= "position:absolute; width:98px; height:100px; overflow: scroll; overflow-x:hidden; z-index: 1; " class= "n1 " >
<table width= "100% " border= "0 " cellpadding= "0 " cellspacing= "0 " id=tb>
<tr>
<td id=t1 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this)> 选择1 </td>
</tr>
<tr>
<td id=t2 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this)> 选择2 </td>
</tr>
<tr>
<td
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
