快捷導(dǎo)航

用javascript和css模擬select的腳本

更新時間：2008年06月01日 20:15:16 作者：

傳統(tǒng)的select控件比較難看，用css美化也達(dá)不到好的效果，而javascript和css結(jié)合起來，用div等元素模擬一個select達(dá)到想要的效果就很容易了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>模擬 美化 select_腳本之家</title>  <style type="text/css"> select{ height:20px; width:150px; } .divSlt{ position:absolute; font-size:12px; } .divSlt span{ display:block; width:100%; border:1px solid #999999; background:url(down.gif) no-repeat right center; text-indent:6px; cursor:pointer; } .divSlt ul{ display:block; background-color:#FFFFFF; width:100%; border:1px solid #999999; border-top:0px; margin:0px; padding:0px; list-style:none; } .divSlt ul li{ text-indent:5px; height:20px; line-height:20px; cursor:pointer; } </style> </head> <body> <form id="form1" name="form1" method="post" action="rq.asp"><table width="600" border="0" cellspacing="0" cellpadding="0">   <tr>     <td width="200" height="30">&nbsp;</td>     <td width="200" height="30">&nbsp;</td>     <td width="200" height="30">&nbsp;</td>   </tr>   <tr>     <td width="200" height="30">&nbsp;</td>     <td width="200" height="30">&nbsp;</td>     <td width="200" height="30"><select name="slt1" id="slt1">       <option value="選項(xiàng)一" selected="selected">選項(xiàng)一</option>       <option value="選項(xiàng)二">選項(xiàng)二</option>       <option value="選項(xiàng)三">選項(xiàng)三</option>       <option value="選項(xiàng)四">選項(xiàng)四</option>       <option value="選項(xiàng)五">選項(xiàng)五</option>       <option value="選項(xiàng)六">選項(xiàng)六</option>       <option value="選項(xiàng)七">選項(xiàng)七</option>         </select></td>   </tr>   <tr>     <td width="200" height="30">&nbsp;</td>     <td width="200" height="30"><select name="slt2" id="slt2">       <option value="選項(xiàng)一" selected="selected">選項(xiàng)一</option>       <option value="選項(xiàng)二">選項(xiàng)二</option>       <option value="選項(xiàng)三">選項(xiàng)三</option>         </select></td>     <td width="200" height="30">&nbsp;</td>   </tr>   <tr>     <td width="200" height="30">&nbsp;</td>     <td width="200" height="30"><input type="submit" name="Submit" value="提交" /></td>     <td width="200" height="30">&nbsp;</td>   </tr> </table> </form> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: