美化select控件最简单的办法

最新推荐文章于 2024-05-24 13:19:01 发布

原创最新推荐文章于 2024-05-24 13:19:01 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #button #border #html #input

jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用JavaScript和CSS来替代HTML原生Select控件的方法，以提高网页美观度并保持原有表单提交功能不变。该方法实现了Select控件的样式自定义及交互功能。

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

select控件的优先级非常高，许多css属性对它没有作用，精心设计的页面因为一个突兀的原生select控件而减分是大家都头痛的事，
下面的方法是通过JS替换页面内原有的select，
我们希望这个JS是非侵入式的，只要引用了select.js这个js文件的页面，就自动把页面里原有的select控件替换接管了。
先初步地实现selct控件的替换，和基本的交互（暂不考虑接管select的onchange事件等问题）。在下面的实现方法里并没有把原有的select去掉，只是隐藏了起来，所以如果select是在表单内，表单仍然能够正常提交。

Html 代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style>
body, table, input, textarea, select {
   margin: 0;
   font-size: 12px;
   line-height:1.5;
   font-family: Tahoma, SimSun, sans-serif;
}
.zSelect {
   display:inline-block;
*zoom: 1;
*display: inline;
   position:relative;
   height:20px;
   vertical-align:middle;
}
.zSelect .inputText {
   line-height: 17px;
   font-size:12px;
   background: #f7fafc;
   padding: 1px 17px 0 1px;
   border: 1px solid #68a;
   vertical-align: top;
   cursor:default;
   height: 17px;
   margin:0;
}
.zSelect .arrowimg {
   display:inline-block;
*zoom: 1;
*display: inline;
   position:relative;
   cursor:pointer;
   width:18px;
   height:20px;
   left:-18px;
   margin-right:-18px;
   vertical-align: top;
   outline:none;
   background: url(http://www.wangzhaohui.com/wp-content/uploads/2009/06/arrow.gif);
}
.zSelect .arrowimg:hover {
   background: url(http://www.wangzhaohui.com/wp-content/uploads/2009/06/arrow_over.gif);
}
.optgroup {
   position:absolute;
   z-index:666;
   left:0;
   top:19px;
   color: #369;
}
.optgroup p {
   margin:0;
}
.optgroup div.optionsDiv {
   padding:1px;
   overflow: auto;
   overflow-x: hidden;
   max-height:300px;
   color: #369;
   border: 1px solid #678;
   background: #f7fafc;
   width:auto;
   z-index:888;
   filter: Alpha(Opacity=90);
   opacity: 0.9;
}
.optgroup a, .optgroup a:visited {
   font-size:12px;
   text-decoration:none;
   cursor:default;
   display:block;
   color: #369;
   white-space: nowrap;
   padding:1px 3px 2px 6px;
   _padding:0 3px 0 6px;
   height:18px;
   min-width:2em;
}
.optgroup a:hover, .optgroup a.selected:hover {
   color: #dff;
   text-decoration:none;
   background:#38d;
}
.optgroup a.selected, .optgroup a:focus {
   color: #eff;
   text-decoration:none;
   background:#49e;
}
</style>
<script>
function replaceSelects() {
    selects = document.getElementsByTagName('select');

    for(var i=0; i < selects.length; i++) {
var selectWidth=selects.clientWidth;
var selectArea = document.createElement('span');
var textInput = document.createElement('input');
var button = document.createElement('a');
selectArea.id = "mySelect"+i;
selectArea.className = "zSelect";
textInput.type = "text";
textInput.className = "inputText";
textInput.readOnly=true;
textInput.style.width=selectWidth+"px";
textInput.id = "mySelectText"+i;
textInput.value = selects.options[0].text;
button.className = "arrowimg";
button.href="javascript:showOptions("+i+")";
button.hideFocus=true;

selectArea.appendChild(textInput);
selectArea.appendChild(button);

        selects.style.display='none';

selects.parentNode.insertBefore(selectArea, selects);

var optgroup = document.createElement('div');
optgroup.className = "optgroup";
optgroup.style.width=selectWidth+20+"px";
optgroup.style.display = "none";
optgroup.id = "optgroup"+i;
var optionsDiv = document.createElement('div');
optionsDiv.className = "optionsDiv";
optionsDiv.id = "optionsDiv"+i;

optgroup.appendChild(optionsDiv);
if(selects.id=="")selects.id="select"+i;

selectArea.appendChild(optgroup);
for(var j=0; j < selects.options.length; j++) {
   var optionHolder = document.createElement('p');
   var optionLink = document.createElement('a');
   var optionTxt = document.createTextNode(selects.options[j].text);
   optionLink.href = "javascript:showOptions("+i+"); selectMe('"+selects.id+"',"+j+","+i+");";
   optionLink.appendChild(optionTxt);
   optionHolder.appendChild(optionLink);
   optionsDiv.appendChild(optionHolder);
   if(selects.options[j].selected){selectMe(selects.id,j,i);}
}
}
}
function showOptions(g) {
var elem = document.getElementById("optgroup"+g);
elemelem.style.display=elem.style.display=='none'?'block':'none';
}
function selectMe(selectFieldId,linkNo,selectNo) {
optionLinks = document.getElementById("optionsDiv"+selectNo).getElementsByTagName("a");
for(var k = 0; k < optionLinks.length; k++) {
if(k==linkNo) {
   optionLinks[k].className = "selected";
}
else {
   optionLinks[k].className = "";
}
}
selectField = document.getElementById(selectFieldId);
for(var k = 0; k < selectField.options.length; k++) {
if(k==linkNo) {
   selectField.options[k].selected = "selected";
}
else {
   selectField.options[k].selected = "";
}
}
var newText = selectField.options[linkNo].text;
document.getElementById("mySelectText"+selectNo).value=newText;
}
window.onload=replaceSelects;
</script>
<div>当前站点:
<select name="select">
    <option value="123123">政府门户类演示站</option>
    <option value="456456">新闻门户类演示站</option>
    <option value="789789">企业形象类演示站</option>
</select>
<<
当前站点:
<select name="select2">
    <option value="123123">政府门户类演示站</option>
    <option value="456456">新闻门户类演示站</option>
    <option value="789789">企业形象类演示站</option>
</select>
<< </div>