用javascript和css模拟select的脚本

传统的select控件比较难看，用css美化也达不到好的效果，而javascript和css结合起来，用div等元素模拟一个select达到想要的效果就很容易了。

<!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_html中文网</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"> </td><td width="200" height="30"> </td><td width="200" height="30"> </td></tr><tr>     <td width="200" height="30"> </td><td width="200" height="30"> </td><td width="200" height="30"><select name="slt1" id="slt1">       <option value="选项一" selected="selected">选项一</option><option value="选项二">选项二</option><option value="选项三">选项三</option><option value="选项四">选项四</option><option value="选项五">选项五</option><option value="选项六">选项六</option><option value="选项七">选项七</option></select></td></tr><tr>     <td width="200" height="30"> </td><td width="200" height="30"><select name="slt2" id="slt2">       <option value="选项一" selected="selected">选项一</option><option value="选项二">选项二</option><option value="选项三">选项三</option></select></td><td width="200" height="30"> </td></tr><tr>     <td width="200" height="30"> </td><td width="200" height="30"><input type="submit" name="Submit" value="提交"/></td><td width="200" height="30"> </td></tr></table></form></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

以上就是用javascript和css模拟select的脚本的详细内容，更多请关注0133技术站其它相关文章！