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

本文介绍了一种使用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. .wenzi{ float:left; height:20px; line-height:20px} 
  10. /*年龄select1*/ 
  11. #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;} 
  12. #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;} 
  13. #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;} 
  14. #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;} 
  15. #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;} 
  16. #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} 
  17. #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} 
  18. /*年龄select1--end*/ 
  19. /*年龄select2*/ 
  20. #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;} 
  21. #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;} 
  22. #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;} 
  23. #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;} 
  24. #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;} 
  25. #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} 
  26. #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} 
  27. /*年龄select2--end*/ 
  28. /*地区select1*/ 
  29. #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;} 
  30. #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;} 
  31. #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;} 
  32. #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;} 
  33. #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;} 
  34. #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} 
  35. #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} 
  36. /*地区select1--end*/ 
  37. /*地区select2*/ 
  38. #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;} 
  39. #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;} 
  40. #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;} 
  41. #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;} 
  42. #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;} 
  43. #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} 
  44. #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} 
  45. /*地区select2--end*/ 
  46. --> 
  47. </style> 
  48. <script>/*############################################################# 
  49. Name: Select to CSS 
  50. Version: 0.2 
  51. Author: Utom 
  52. URL: http://utombox.com/ 
  53. #############################################################*/ 
  54. var selects = document.getElementsByTagName('select'); 
  55. var isIE = (document.all && window.ActiveXObject && !window.opera) ? true : false; 
  56. function $(id) { 
  57. return document.getElementById(id); 
  58. function stopBubbling (ev) { 
  59. ev.stopPropagation(); 
  60. function rSelects() { 
  61. for (i=0;i<selects.length;i++){ 
  62. selects[i].style.display = 'none'
  63. select_tag = document.createElement('div'); 
  64. select_tag.id = 'select_' + selects[i].name; 
  65. select_tag.className = 'select_box'
  66. selects[i].parentNode.insertBefore(select_tag,selects[i]); 
  67. select_info = document.createElement('div'); 
  68. select_info.id = 'select_info_' + selects[i].name; 
  69. select_info.className='tag_select'
  70. select_info.style.cursor='pointer'
  71. select_tag.appendChild(select_info); 
  72. select_ul = document.createElement('ul'); 
  73. select_ul.id = 'options_' + selects[i].name; 
  74. select_ul.className = 'tag_options'
  75. select_ul.style.position='absolute'
  76. select_ul.style.display='none'
  77. select_ul.style.zIndex='999'
  78. select_tag.appendChild(select_ul); 
  79. rOptions(i,selects[i].name); 
  80. mouseSelects(selects[i].name); 
  81. if (isIE){ 
  82. selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"');window.event.cancelBubble = true;"); 
  83. else if(!isIE){ 
  84. selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"')"); 
  85. selects[i].addEventListener("click", stopBubbling, false); 
  86. function rOptions(i, name) { 
  87. var options = selects[i].getElementsByTagName('option'); 
  88. var options_ul = 'options_' + name; 
  89. for (n=0;n<selects[i].options.length;n++){ 
  90. option_li = document.createElement('li'); 
  91. option_li.style.cursor='pointer'
  92. option_li.className='open'
  93. $(options_ul).appendChild(option_li); 
  94. option_text = document.createTextNode(selects[i].options[n].text); 
  95. option_li.appendChild(option_text); 
  96. option_selected = selects[i].options[n].selected; 
  97. if(option_selected){ 
  98. option_li.className='open_selected'
  99. option_li.id='selected_' + name; 
  100. $('select_info_' + name).appendChild(document.createTextNode(option_li.innerHTML)); 
  101. option_li.onmouseover = function(){ this.className='open_hover';} 
  102. option_li.onmouseout = function(){ 
  103. if(this.id=='selected_' + name){ 
  104. this.className='open_selected'
  105. else { 
  106. this.className='open'
  107. option_li.onclick = new Function("clickOptions("+i+","+n+",'"+selects[i].name+"')"); 
  108. function mouseSelects(name){ 
  109. var sincn = 'select_info_' + name; 
  110. $(sincn).onmouseover = function(){ if(this.className=='tag_select') this.className='tag_select_hover'; } 
  111. $(sincn).onmouseout = function(){ if(this.className=='tag_select_hover') this.className='tag_select'; } 
  112. if (isIE){ 
  113. $(sincn).onclick = new Function("clickSelects('"+name+"');window.event.cancelBubble = true;"); 
  114. else if(!isIE){ 
  115. $(sincn).onclick = new Function("clickSelects('"+name+"');"); 
  116. $('select_info_' +name).addEventListener("click", stopBubbling, false); 
  117. function clickSelects(name){ 
  118. var sincn = 'select_info_' + name; 
  119. var sinul = 'options_' + name; 
  120. for (i=0;i<selects.length;i++){ 
  121. if(selects[i].name == name){ 
  122. if( $(sincn).className =='tag_select_hover'){ 
  123. $(sincn).className ='tag_select_open'
  124. $(sinul).style.display = ''
  125. else if( $(sincn).className =='tag_select_open'){ 
  126. $(sincn).className = 'tag_select_hover'
  127. $(sinul).style.display = 'none'
  128. else{ 
  129. $('select_info_' + selects[i].name).className = 'tag_select'
  130. $('options_' + selects[i].name).style.display = 'none'
  131. function clickOptions(i, n, name){ 
  132. var li = $('options_' + name).getElementsByTagName('li'); 
  133. $('selected_' + name).className='open'
  134. $('selected_' + name).id=''
  135. li[n].id='selected_' + name; 
  136. li[n].className='open_hover'
  137. $('select_' + name).removeChild($('select_info_' + name)); 
  138. select_info = document.createElement('div'); 
  139. select_info.id = 'select_info_' + name; 
  140. select_info.className='tag_select'
  141. select_info.style.cursor='pointer'
  142. $('options_' + name).parentNode.insertBefore(select_info,$('options_' + name)); 
  143. mouseSelects(name); 
  144. $('select_info_' + name).appendChild(document.createTextNode(li[n].innerHTML)); 
  145. $( 'options_' + name ).style.display = 'none' ; 
  146. $( 'select_info_' + name ).className = 'tag_select'
  147. selects[i].options[n].selected = 'selected'
  148. window.onload = function(e) { 
  149. bodyclick = document.getElementsByTagName('body').item(0); 
  150. rSelects(); 
  151. bodyclick.onclick = function(){ 
  152. for (i=0;i<selects.length;i++){ 
  153. $('select_info_' + selects[i].name).className = 'tag_select'
  154. $('options_' + selects[i].name).style.display = 'none'
  155. }</script> 
  156. </head> 
  157. <body><div style="margin:10px auto; width:349px; border:#ccc dotted 5px"> 
  158. <table width="100%" height="91" border="0" align="right" cellpadding="0" cellspacing="0"> 
  159. <tr> 
  160. <td width="19%" height="30"><span class="wenzi">· 我要找:</span></td> 
  161. <td colspan="3" class="zhao"><input name="sex" type="radio" class="isco" id="sex" value="1"/> 
  162. 女士 
  163. <input type="radio" name="sex" id="sex" value="0" checked="checked" /> 
  164. 男士 
  165. <input type="checkbox" name="photo" value="1" checked="checked"/> 
  166. 有照片</td> 
  167. </tr> 
  168. <tr> 
  169. <td height="31"><span class="wenzi">· 年 龄:</span></td> 
  170. <td width="23%"><div id="age_sel_1"> 
  171. <select name="age_selet1" id="age_select1"> 
  172. <option value="18">18</option> 
  173. <option value="28" >28</option> 
  174. <option value="38" >38</option> 
  175. <option value="48" >48</option> 
  176. <option value="58" >58</option> 
  177. <option value="68" >68</option> 
  178. <option value="78" >78</option> 
  179. <option value="88" >88</option> 
  180. <option value="98" >98</option> 
  181. </select> 
  182. </div></td> 
  183. <td width="6%"></td> 
  184. <td width="46%"><div id="age_sel_2"> 
  185. <select name="age_selet2" id="age_select2"> 
  186. <option value="18">18</option> 
  187. <option value="28" >28</option> 
  188. <option value="38" >38</option> 
  189. <option value="48" >48</option> 
  190. <option value="58" >58</option> 
  191. <option value="68" >68</option> 
  192. <option value="78" >78</option> 
  193. <option value="88" >88</option> 
  194. <option value="98" >98</option> 
  195. </select> 
  196. </div></td> 
  197. </tr> 
  198. <tr> 
  199. <td><span class="wenzi">· 地 区:</span></td> 
  200. <td colspan="2"><div id="area_sel_1"> 
  201. <select name="area_selet1" id="area_select1"> 
  202. <option value="北京">北京</option> 
  203. <option value="上海" >上海</option> 
  204. <option value="武汉" >武汉</option> 
  205. <option value="南京" >南京</option> 
  206. <option value="广州" >广州</option> 
  207. <option value="沈阳" >沈阳</option> 
  208. <option value="西安" >西安</option> 
  209. <option value="郑州" >郑州</option> 
  210. <option value="长沙" >长沙</option> 
  211. </select> 
  212. </div></td> 
  213. <td><div id="age_sel_2"> 
  214. <select name="area_selet2" id="area_select2"> 
  215. <option value="北京">北京</option> 
  216. <option value="上海" >上海</option> 
  217. <option value="武汉" >武汉</option> 
  218. <option value="南京" >南京</option> 
  219. <option value="广州" >广州</option> 
  220. <option value="沈阳" >沈阳</option> 
  221. <option value="西安" >西安</option> 
  222. <option value="郑州" >郑州</option> 
  223. <option value="长沙" >长沙</option> 
  224. </select> 
  225. </div></td> 
  226. </tr> 
  227. </table></div> 
  228. </body> 
  229. </html> 
http://www.corange.cn//uploadfiles/1017_55488.jpg
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值