十载风雨路 · 匠心铸精品

量身定制 追求完美

怎样最简单的美化select控件

 发布日期:2011-11-18 12:00:00 浏览:3911次
select控件的优先级非常高,许多css属性对它没有作用,精心设计的页面因为一个突兀的原生select控件而减分是大家都头痛的事,
下面的方法是通过JS替换页面内原有的select,
我们希望这个JS是非侵入式的,只要引用了select.js这个js文件的页面,就自动把页面里原有的select控件替换接管了。
先初步地实现selct控件的替换,和基本的交互(暂不考虑接管select的onchange事件等问题)。在下面的实现方法里并没有把原有的select去掉,只是隐藏了起来,所以如果select是在表单内,表单仍然能够正常提交。
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <style>
  3. body,
  4. table,
  5. input,
  6. textarea,
  7. select{
  8. margin: 0;
  9. font-size: 12px;
  10. line-height:1.5;
  11. font-family: Tahoma, SimSun, sans-serif;
  12. }
  13. .zSelect {
  14. display:inline-block;
  15. *zoom: 1;
  16. *display: inline;
  17. position:relative;
  18. height:20px;
  19. vertical-align:middle;
  20. }
  21. .zSelect .inputText {
  22. line-height: 17px;
  23. font-size:12px;
  24. background: #f7fafc;
  25. padding: 1px 17px 0 1px;
  26. border: 1px solid #68a;
  27. vertical-align: top;
  28. cursor:default;
  29. height: 17px;
  30. margin:0;
  31. }
  32. .zSelect .arrowimg {
  33. display:inline-block;
  34. *zoom: 1;
  35. *display: inline;
  36. position:relative;
  37. cursor:pointer;
  38. width:18px;
  39. height:20px;
  40. left:-18px;
  41. margin-right:-18px;
  42. vertical-align: top;
  43. outline:none;
  44. background: url(http://www.wangzhaohui.com/wp-content/uploads/2009/06/arrow.gif);
  45. }
  46. .zSelect .arrowimg:hover {
  47. background: url(http://www.wangzhaohui.com/wp-content/uploads/2009/06/arrow_over.gif);
  48. }
  49. .optgroup {
  50. position:absolute;
  51. z-index:666;
  52. left:0;
  53. top:19px;
  54. color: #369;
  55. }
  56. .optgroup p{ margin:0;}
  57. .optgroup div.optionsDiv{
  58. padding:1px;
  59. overflow: auto;
  60. overflow-x: hidden;
  61. max-height:300px;
  62. color: #369;
  63. border: 1px solid #678;
  64. background: #f7fafc;
  65. width:auto;
  66. z-index:888;
  67. filter: Alpha(Opacity=90); opacity: 0.9;
  68. }
  69. .optgroup a, .optgroup a:visited{
  70. font-size:12px;
  71. text-decoration:none;
  72. cursor:default;
  73. display:block;
  74. color: #369;
  75. white-space: nowrap;
  76. padding:1px 3px 2px 6px;
  77. _padding:0 3px 0 6px;
  78. height:18px;
  79. min-width:2em;
  80. }
  81. .optgroup a:hover,.optgroup a.selected:hover{
  82. color: #dff;
  83. text-decoration:none;
  84. background:#38d;
  85. }
  86. .optgroup a.selected,.optgroup a:focus{
  87. color: #eff;
  88. text-decoration:none;
  89. background:#49e;
  90. }
  91. </style>
  92. <script>
  93. function replaceSelects() {
  94.     selects = document.getElementsByTagName('select');

  95.     for(var i=0; i < selects.length; i++) {
  96.   var selectWidth=selects.clientWidth;
  97.   var selectArea = document.createElement('span');
  98.   var textInput = document.createElement('input');
  99.   var button = document.createElement('a');
  100.   selectArea.id = "mySelect"+i;
  101.   selectArea.className = "zSelect";
  102.   textInput.type = "text";
  103.   textInput.className = "inputText";
  104.   textInput.readOnly=true;
  105.   textInput.style.width=selectWidth+"px";
  106.   textInput.id = "mySelectText"+i;
  107.   textInput.value = selects.options[0].text;
  108.   button.className = "arrowimg";
  109.   button.href="javascript:showOptions("+i+")";
  110.   button.hideFocus=true;

  111.   selectArea.appendChild(textInput);
  112.   selectArea.appendChild(button);
  113.   
  114.         selects.style.display='none';
  115.   
  116.   selects.parentNode.insertBefore(selectArea, selects);
  117.   
  118.   var optgroup = document.createElement('div');
  119.   optgroup.className = "optgroup";
  120.   optgroup.style.width=selectWidth+20+"px";
  121.   optgroup.style.display = "none";
  122.   optgroup.id = "optgroup"+i;
  123.   var optionsDiv = document.createElement('div');
  124.   optionsDiv.className = "optionsDiv";
  125.   optionsDiv.id = "optionsDiv"+i;
  126.   
  127.   optgroup.appendChild(optionsDiv);
  128.   if(selects.id=="")selects.id="select"+i;
  129.   
  130.   selectArea.appendChild(optgroup);
  131.   for(var j=0; j < selects.options.length; j++) {
  132.    var optionHolder = document.createElement('p');
  133.    var optionLink = document.createElement('a');
  134.    var optionTxt = document.createTextNode(selects.options[j].text);
  135.    optionLink.href = "javascript:showOptions("+i+"); selectMe('"+selects.id+"',"+j+","+i+");";
  136.    optionLink.appendChild(optionTxt);
  137.    optionHolder.appendChild(optionLink);
  138.    optionsDiv.appendChild(optionHolder);
  139.    if(selects.options[j].selected){selectMe(selects.id,j,i);}
  140.   }
  141. }
  142. }
  143. function showOptions(g) {
  144. var elem = document.getElementById("optgroup"+g);
  145. elem.style.display=elem.style.display=='none'?'block':'none';
  146. }
  147. function selectMe(selectFieldId,linkNo,selectNo) {
  148. optionLinks = document.getElementById("optionsDiv"+selectNo).getElementsByTagName("a");
  149. for(var k = 0; k < optionLinks.length; k++) {
  150.   if(k==linkNo) {
  151.    optionLinks[k].className = "selected";
  152.   }
  153.   else {
  154.    optionLinks[k].className = "";
  155.   }
  156. }
  157. selectField = document.getElementById(selectFieldId);
  158. for(var k = 0; k < selectField.options.length; k++) {
  159.   if(k==linkNo) {
  160.    selectField.options[k].selected = "selected";
  161.   }
  162.   else {
  163.    selectField.options[k].selected = "";
  164.   }
  165. }
  166. var newText = selectField.options[linkNo].text;
  167. document.getElementById("mySelectText"+selectNo).value=newText;
  168. }
  169. window.onload=replaceSelects;
  170. </script>
  171. <div>当前站点:
  172. <select name="select">
  173.   <option value="123123">政府门户类演示站</option>
  174.   <option value="456456">新闻门户类演示站</option>
  175.   <option value="789789">企业形象类演示站</option>
  176. </select>
  177.   lt;&lt;
  178. 当前站点:
  179. <select name="select2">
  180.   <option value="123123">政府门户类演示站</option>
  181.   <option value="456456">新闻门户类演示站</option>
  182.   <option value="789789">企业形象类演示站</option>
  183. </select>
  184.   lt;&lt;
  185. </div>
复制代码
OK,在ff3下测试通过,在ie下存在层的定位问题

相关新闻

CopyRight 2004-2018 JSOON NETWORK , Inc. All Rights Reserved 专业互联网开发服务提供商-佳速网络   服务热线:021-58361813   沪ICP备09051443号-4   网站地图
上海佳速公司提供上海网站建设制作、app开发、微信小程序开发服务

021-58361813