JS+CSS和图片美化下拉列表选择框

于 2008-12-11 16:13:00 发布
阅读量1.8k 收藏
点赞数
分类专栏： 网站建设 文章标签： css function div class border float
本文介绍了一种使用JavaScript和CSS美化HTML下拉列表选择框的方法。通过将原生的选择框替换为自定义样式元素，可以实现更丰富的视觉效果。具体包括不同尺寸的下拉框、鼠标悬停效果以及选项的高亮显示等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>JS+CSS和图片美化下拉列表选择框（select)-</title> 
  6. <style type="text/css"> 
  7. body{ 
  8. font-size:12px; margin:0 
  9. } 
  10. .wenzi{ float:left; height:20px; line-height:20px} 
  11. /*年龄select1*/ 
  12. #age_sel_1 div.tag_select{display:block;color:#000;width:62px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 0;padding:0 10px;line-height:22px;} 
  13. #age_sel_1 div.tag_select_hover{display:block;color:#000;width:62px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -22px;padding:0 10px;line-height:22px;} 
  14. #age_sel_1 div.tag_select_open{display:block;color:#000;width:62px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -44px;padding:0 10px;line-height:22px;} 
  15. #age_sel_1 ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat left bottom;padding:0 0 1px;margin:0;width:60px;} 
  16. #age_sel_1 ul.tag_options li{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") repeat-y -102px 0;display:block;width:61px;padding:0 10px;height:22px;text-decoration:none;line-height:22px;color:#000;} 
  17. #age_sel_1 ul.tag_options li.open_hover{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -88px;color:#000} 
  18. #age_sel_1 ul.tag_options li.open_selected{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -66px;color:#19555F} 
  19. /*年龄select1--end*/ 
  20. /*年龄select2*/ 
  21. #age_sel_2 div.tag_select{display:block;color:#000;width:62px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 0;padding:0 10px;line-height:22px;} 
  22. #age_sel_2 div.tag_select_hover{display:block;color:#000;width:62px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -22px;padding:0 10px;line-height:22px;} 
  23. #age_sel_2 div.tag_select_open{display:block;color:#000;width:62px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -44px;padding:0 10px;line-height:22px;} 
  24. #age_sel_2 ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat left bottom;padding:0 0 1px;margin:0;width:60px;} 
  25. #age_sel_2 ul.tag_options li{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") repeat-y -102px 0;display:block;width:61px;padding:0 10px;height:22px;text-decoration:none;line-height:22px;color:#000;} 
  26. #age_sel_2 ul.tag_options li.open_hover{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -88px;color:#000} 
  27. #age_sel_2 ul.tag_options li.open_selected{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -66px;color:#19555F} 
  28. /*年龄select2--end*/ 
  29. /*地区select1*/ 
  30. #area_sel_1 div.tag_select{display:block;color:#000;width:82px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif") no-repeat 0 0;padding:0 10px;line-height:22px;} 
  31. #area_sel_1 div.tag_select_hover{display:block;color:#000;width:82px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif") no-repeat 0 -22px;padding:0 10px;line-height:22px;} 
  32. #area_sel_1 div.tag_select_open{display:block;color:#000;width:82px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif") no-repeat 0 -44px;padding:0 10px;line-height:22px;} 
  33. #area_sel_1 ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif") no-repeat left bottom;width:100px;padding:0 0 1px;margin:0;width:80px;} 
  34. #area_sel_1 ul.tag_options li{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif") repeat-y -102px 0;display:block;width:61px;padding:0 10px;height:22px;text-decoration:none;line-height:22px;color:#000;} 
  35. #area_sel_1 ul.tag_options li.open_hover{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif") no-repeat 0 -88px;color:#000} 
  36. #area_sel_1 ul.tag_options li.open_selected{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif") no-repeat 0 -66px;color:#19555F} 
  37. /*地区select1--end*/ 
  38. /*地区select2*/ 
  39. #area_sel_2 div.tag_select{display:block;color:#000;width:62px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 0;padding:0 10px;line-height:22px;} 
  40. #area_sel_2 div.tag_select_hover{display:block;color:#000;width:62px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -22px;padding:0 10px;line-height:22px;} 
  41. #area_sel_2 div.tag_select_open{display:block;color:#000;width:62px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -44px;padding:0 10px;line-height:22px;} 
  42. #area_sel_2 ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat left bottom;padding:0 0 1px;margin:0;width:60px;} 
  43. #area_sel_2 ul.tag_options li{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") repeat-y -102px 0;display:block;width:61px;padding:0 10px;height:22px;text-decoration:none;line-height:22px;color:#000;} 
  44. #area_sel_2 ul.tag_options li.open_hover{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -88px;color:#000} 
  45. #area_sel_2 ul.tag_options li.open_selected{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -66px;color:#19555F} 
  46. /*地区select2--end*/ 
  47. --> 
  48. </style> 
  49. <script>/*############################################################# 
  50. Name: Select to CSS 
  51. Version: 0.2 
  52. Author: Utom 
  53. URL: http://utombox.com/ 
  54. #############################################################*/ 
  55. var selects = document.getElementsByTagName('select'); 
  56. var isIE = (document.all && window.ActiveXObject && !window.opera) ? true : false; 
  57. function $(id) { 
  58. return document.getElementById(id); 
  59. } 
  60. function stopBubbling (ev) { 
  61. ev.stopPropagation(); 
  62. } 
  63. function rSelects() { 
  64. for (i=0;i<selects.length;i++){ 
  65. selects[i].style.display = 'none'; 
  66. select_tag = document.createElement('div'); 
  67. select_tag.id = 'select_' + selects[i].name; 
  68. select_tag.className = 'select_box'; 
  69. selects[i].parentNode.insertBefore(select_tag,selects[i]); 
  70. select_info = document.createElement('div'); 
  71. select_info.id = 'select_info_' + selects[i].name; 
  72. select_info.className='tag_select'; 
  73. select_info.style.cursor='pointer'; 
  74. select_tag.appendChild(select_info); 
  75. select_ul = document.createElement('ul'); 
  76. select_ul.id = 'options_' + selects[i].name; 
  77. select_ul.className = 'tag_options'; 
  78. select_ul.style.position='absolute'; 
  79. select_ul.style.display='none'; 
  80. select_ul.style.zIndex='999'; 
  81. select_tag.appendChild(select_ul); 
  82. rOptions(i,selects[i].name); 
  84. mouseSelects(selects[i].name); 
  85. if (isIE){ 
  86. selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"');window.event.cancelBubble = true;"); 
  87. } 
  88. else if(!isIE){ 
  89. selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"')"); 
  90. selects[i].addEventListener("click", stopBubbling, false); 
  91. } 
  92. } 
  93. } 
  94. function rOptions(i, name) { 
  95. var options = selects[i].getElementsByTagName('option'); 
  96. var options_ul = 'options_' + name; 
  97. for (n=0;n<selects[i].options.length;n++){ 
  98. option_li = document.createElement('li'); 
  99. option_li.style.cursor='pointer'; 
  100. option_li.className='open'; 
  101. $(options_ul).appendChild(option_li); 
  102. option_text = document.createTextNode(selects[i].options[n].text); 
  103. option_li.appendChild(option_text); 
  104. option_selected = selects[i].options[n].selected; 
  105. if(option_selected){ 
  106. option_li.className='open_selected'; 
  107. option_li.id='selected_' + name; 
  108. $('select_info_' + name).appendChild(document.createTextNode(option_li.innerHTML)); 
  109. } 
  111. option_li.onmouseover = function(){ this.className='open_hover';} 
  112. option_li.onmouseout = function(){ 
  113. if(this.id=='selected_' + name){ 
  114. this.className='open_selected'; 
  115. } 
  116. else { 
  117. this.className='open'; 
  118. } 
  119. } 
  121. option_li.onclick = new Function("clickOptions("+i+","+n+",'"+selects[i].name+"')"); 
  122. } 
  123. } 
  124. function mouseSelects(name){ 
  125. var sincn = 'select_info_' + name; 
  126. $(sincn).onmouseover = function(){ if(this.className=='tag_select') this.className='tag_select_hover'; } 
  127. $(sincn).onmouseout = function(){ if(this.className=='tag_select_hover') this.className='tag_select'; } 
  128. if (isIE){ 
  129. $(sincn).onclick = new Function("clickSelects('"+name+"');window.event.cancelBubble = true;"); 
  130. } 
  131. else if(!isIE){ 
  132. $(sincn).onclick = new Function("clickSelects('"+name+"');"); 
  133. $('select_info_' +name).addEventListener("click", stopBubbling, false); 
  134. } 
  135. } 
  136. function clickSelects(name){ 
  137. var sincn = 'select_info_' + name; 
  138. var sinul = 'options_' + name; 
  139. for (i=0;i<selects.length;i++){ 
  140. if(selects[i].name == name){ 
  141. if( $(sincn).className =='tag_select_hover'){ 
  142. $(sincn).className ='tag_select_open'; 
  143. $(sinul).style.display = ''; 
  144. } 
  145. else if( $(sincn).className =='tag_select_open'){ 
  146. $(sincn).className = 'tag_select_hover'; 
  147. $(sinul).style.display = 'none'; 
  148. } 
  149. } 
  150. else{ 
  151. $('select_info_' + selects[i].name).className = 'tag_select'; 
  152. $('options_' + selects[i].name).style.display = 'none'; 
  153. } 
  154. } 
  155. } 
  156. function clickOptions(i, n, name){ 
  157. var li = $('options_' + name).getElementsByTagName('li'); 
  158. $('selected_' + name).className='open'; 
  159. $('selected_' + name).id=''; 
  160. li[n].id='selected_' + name; 
  161. li[n].className='open_hover'; 
  162. $('select_' + name).removeChild($('select_info_' + name)); 
  163. select_info = document.createElement('div'); 
  164. select_info.id = 'select_info_' + name; 
  165. select_info.className='tag_select'; 
  166. select_info.style.cursor='pointer'; 
  167. $('options_' + name).parentNode.insertBefore(select_info,$('options_' + name)); 
  168. mouseSelects(name); 
  169. $('select_info_' + name).appendChild(document.createTextNode(li[n].innerHTML)); 
  170. $( 'options_' + name ).style.display = 'none' ; 
  171. $( 'select_info_' + name ).className = 'tag_select'; 
  172. selects[i].options[n].selected = 'selected'; 
  173. } 
  174. window.onload = function(e) { 
  175. bodyclick = document.getElementsByTagName('body').item(0); 
  176. rSelects(); 
  177. bodyclick.onclick = function(){ 
  178. for (i=0;i<selects.length;i++){ 
  179. $('select_info_' + selects[i].name).className = 'tag_select'; 
  180. $('options_' + selects[i].name).style.display = 'none'; 
  181. } 
  182. } 
  183. }</script> 
  184. </head> 
  185. <body><div style="margin:10px auto; width:349px; border:#ccc dotted 5px"> 
  186. <table width="100%" height="91" border="0" align="right" cellpadding="0" cellspacing="0"> 
  187. <tr> 
  188. <td width="19%" height="30"><span class="wenzi">· 我要找：</span></td> 
  189. <td colspan="3" class="zhao"><input name="sex" type="radio" class="isco" id="sex" value="1"/> 
  190. 女士 
  191. <input type="radio" name="sex" id="sex" value="0" checked="checked" /> 
  192. 男士 
  193. <input type="checkbox" name="photo" value="1" checked="checked"/> 
  194. 有照片</td> 
  195. </tr> 
  196. <tr> 
  197. <td height="31"><span class="wenzi">· 年 龄：</span></td> 
  198. <td width="23%"><div id="age_sel_1"> 
  199. <select name="age_selet1" id="age_select1"> 
  200. <option value="18">18</option> 
  201. <option value="28" >28</option> 
  202. <option value="38" >38</option> 
  203. <option value="48" >48</option> 
  204. <option value="58" >58</option> 
  205. <option value="68" >68</option> 
  206. <option value="78" >78</option> 
  207. <option value="88" >88</option> 
  208. <option value="98" >98</option> 
  209. </select> 
  210. </div></td> 
  211. <td width="6%">到</td> 
  212. <td width="46%"><div id="age_sel_2"> 
  213. <select name="age_selet2" id="age_select2"> 
  214. <option value="18">18</option> 
  215. <option value="28" >28</option> 
  216. <option value="38" >38</option> 
  217. <option value="48" >48</option> 
  218. <option value="58" >58</option> 
  219. <option value="68" >68</option> 
  220. <option value="78" >78</option> 
  221. <option value="88" >88</option> 
  222. <option value="98" >98</option> 
  223. </select> 
  224. </div></td> 
  225. </tr> 
  226. <tr> 
  227. <td><span class="wenzi">· 地 区：</span></td> 
  228. <td colspan="2"><div id="area_sel_1"> 
  229. <select name="area_selet1" id="area_select1"> 
  230. <option value="北京">北京</option> 
  231. <option value="上海" >上海</option> 
  232. <option value="武汉" >武汉</option> 
  233. <option value="南京" >南京</option> 
  234. <option value="广州" >广州</option> 
  235. <option value="沈阳" >沈阳</option> 
  236. <option value="西安" >西安</option> 
  237. <option value="郑州" >郑州</option> 
  238. <option value="长沙" >长沙</option> 
  239. </select> 
  240. </div></td> 
  241. <td><div id="age_sel_2"> 
  242. <select name="area_selet2" id="area_select2"> 
  243. <option value="北京">北京</option> 
  244. <option value="上海" >上海</option> 
  245. <option value="武汉" >武汉</option> 
  246. <option value="南京" >南京</option> 
  247. <option value="广州" >广州</option> 
  248. <option value="沈阳" >沈阳</option> 
  249. <option value="西安" >西安</option> 
  250. <option value="郑州" >郑州</option> 
  251. <option value="长沙" >长沙</option> 
  252. </select> 
  253. </div></td> 
  254. </tr> 
  255. </table></div> 
  256. </body> 
  257. </html> 
http://www.corange.cn//uploadfiles/1017_55488.jpg
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值