Select下拉框样式

作者:Huison 日期:2006-09-23

字体大小: 小中大

无意中在一个韩国网页中发现了这个样式,顺藤摸瓜得到了下面的代码,包括CSS和JS文件,收藏之~
以下是网页中应用样式:

程序代码

<HTML><HEAD>
<LINK href="style.css" type=text/css rel=stylesheet>
<SCRIPT src="selectBox.js" type=text/javascript></SCRIPT>
<BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0">
<Select class=in id=selectTest style="DISPLAY: none; BACKGROUND: #ffffff; WIDTH: 130px; HEIGHT: 19px" name=search>
<OPTION value="" selected>www.huison.cn</OPTION>
<OPTION value=name>www.baidu.com</OPTION>
<OPTION value=title>www.hoogl.net</OPTION>
</Select>
<SCRIPT>makeSelectBox("selectTest");</SCRIPT>
</BODY>
</HTML>

以下是CSS样式表 /style.css :

程序代码

.IN {
    BORDER-RIGHT: #afaeae 1px solid; BORDER-TOP: #afaeae 1px solid; FONT-SIZE: 10pt; BORDER-LEFT: #afaeae 1px solid; COLOR: #7b7b7b; BORDER-BOTTOM: #afaeae 1px solid; FONT-FAMILY: "verdana"
}
.selectBoxSelectedArea {
    PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 17px; PADDING-TOP: 1px;  BACKGROUND-COLOR: #ffffff
}
.selectBoxSelectedAreaFocus {
    PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 17px; PADDING-TOP: 1px;  BACKGROUND-COLOR: #ffffff
}
.selectBoxOption {
    PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 17px; PADDING-TOP: 2px;  BACKGROUND-COLOR: #ffffff
}
.selectBoxOptionOver {
    PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 17px; PADDING-TOP: 2px;  BACKGROUND-COLOR: #ffffff
}
.selectBoxOptionInnerLayer {
    BORDER-RIGHT: #b4b4b4 1px solid; BORDER-TOP: #b4b4b4 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #b4b4b4; OVERFLOW: auto; BORDER-LEFT: #b4b4b4 1px solid; SCROLLBAR-SHADOW-COLOR: #b4b4b4; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #838383; SCROLLBAR-TRACK-COLOR: #eaeaea; BORDER-BOTTOM: #b4b4b4 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; BACKGROUND-COLOR: #ffffff
}

以下是selectBox.js的代码:

程序代码

var nowOpenedSelectBox = "";
var mousePosition = "";

function selectThisValue(thisId,thisIndex,thisValue,thisString) {
    var objId = thisId;
    var nowIndex = thisIndex;
    var valueString = thisString;
    var sourceObj = document.getElementById(objId);
    var nowSelectedValue = document.getElementById(objId+"SelectBoxOptionValue"+nowIndex).value;
    hideOptionLayer(objId);
    if (sourceObj) sourceObj.value = nowSelectedValue;
    settingValue(objId,valueString);
    selectBoxFocus(objId);
    if (sourceObj.onchange) sourceObj.onchange();
}

function settingValue(thisId,thisString) {
    var objId = thisId;
    var valueString = thisString;
    var selectedArea = document.getElementById(objId+"selectBoxSelectedValue");
    if (selectedArea) selectedArea.innerText = valueString;
}

function viewOptionLayer(thisId) {
    var objId = thisId;
    var optionLayer = document.getElementById(objId+"selectBoxOptionLayer");
    if (optionLayer) optionLayer.style.display = "";
    nowOpenedSelectBox = objId;
    setMousePosition("inBox");
}

function hideOptionLayer(thisId) {
    var objId = thisId;
    var optionLayer = document.getElementById(objId+"selectBoxOptionLayer");
    if (optionLayer) optionLayer.style.display = "none";
}

function setMousePosition(thisValue) {
    var positionValue = thisValue;
    mousePosition = positionValue;
}

function clickMouse() {
    if (mousePosition == "out") hideOptionLayer(nowOpenedSelectBox);
}

function selectBoxFocus(thisId) {
    var objId = thisId;
    var obj = document.getElementById(objId + "selectBoxSelectedValue");
    obj.className = "selectBoxSelectedAreaFocus";
    obj.focus();
}

function selectBoxBlur(thisId) {
    var objId = thisId;
    var obj = document.getElementById(objId + "selectBoxSelectedValue");
    obj.className = "selectBoxSelectedArea";
}

function makeSelectBox(thisId) {
    var downArrowSrc = "http://www.cnufineart.com/img/bu_down01.gif";    //三角
    var downArrowSrcWidth = 16;    //宽
    var optionHeight = 18; // 高
    var optionMaxNum = 7; //
    var optionInnerLayerHeight = "";
    var objId = thisId;
    var obj = document.getElementById(objId);
    var selectBoxWidth = parseInt(obj.style.width);
    var selectBoxHeight = parseInt(obj.style.height);
    if (obj.options.length > optionMaxNum) optionInnerLayerHeight = "height:"+ (optionHeight * optionMaxNum) + "px";
    newSelect  = "<table id='" + objId + "selectBoxOptionLayer' cellpadding='0' cellspacing='0' border='0' style='position:absolute;z-index:100;display:none;' onMouseOver=\"viewOptionLayer('"+ objId + "')\" onMouseOut=\"setMousePosition('out')\">";
    newSelect += "    <tr>";
    newSelect += "        <td height='" + selectBoxHeight + "' style='cursor:hand;' onClick=\"hideOptionLayer('"+ objId + "')\"></td>";
    newSelect += "    </tr>";
    newSelect += "    <tr>";
    newSelect += "        <td height='1'></td>";
    newSelect += "    </tr>";
    newSelect += "    <tr>";
    newSelect += "        <td bgcolor='#D3D3D3'>";
    newSelect += "        <div class='selectBoxOptionInnerLayer' style='width:" + (selectBoxWidth-1) + "px;" + optionInnerLayerHeight + "'>";
    newSelect += "        <table cellpadding='0' cellspacing='0' border='0' width='100%' style='table-layout:fixed;word-break:break-all;'>";
    for (var i=0 ; i < obj.options.length ; i++) {
        var nowValue = obj.options[i].value;
        var nowText = obj.options[i].text;
        newSelect += "            <tr>";
        newSelect += "                <td onMouseOver=this.style.backgroundColor='#FFBA00';return true;  onMouseOut=this.style.backgroundColor='FFFFFF';return true; bgcolor=#FFFFFF height='" + optionHeight + "' class='selectBoxOption' onMouseOver=\"this.className='selectBoxOptionOver'\" onMouseOut=\"this.className='selectBoxOption'\" onClick=\"selectThisValue('"+ objId + "'," + i + ",'" + nowValue + "','" + nowText + "')\" style='cursor:hand;' >" + nowText + "</td>";
        newSelect += "                <input type='hidden' id='"+ objId + "SelectBoxOptionValue" + i + "' value='" + nowValue + "'>";
        newSelect += "            </tr>";
    }
    newSelect += "        </table>";
    newSelect += "        </div>";
    newSelect += "        </td>";
    newSelect += "    </tr>";
    newSelect += "</table>";
    newSelect += "<table cellpadding='0' cellspacing='1' border='0' bgcolor='#B4B4B4' onClick=\"viewOptionLayer('"+ objId + "')\" style='cursor:hand;'>";
    newSelect += "    <tr>";
    newSelect += "        <td style='padding-left:1px' bgcolor='#FFFFFF'>";
    newSelect += "        <table cellpadding='0' cellspacing='0' border='0'>";
    newSelect += "            <tr>";
    newSelect += "                <td><div id='" + objId + "selectBoxSelectedValue' class='selectBoxSelectedArea' style='width:" + (selectBoxWidth - downArrowSrcWidth - 4) + "px;height:" + (selectBoxHeight - 2) + "px;overflow:hidden;' onBlur=\"selectBoxBlur('" + objId + "')\" ></div></td>";
    newSelect += "                <td><img src='" + downArrowSrc + "' width='" + downArrowSrcWidth + "' border='0'></td>";
    newSelect += "            </tr>";
    newSelect += "        </table>";
    newSelect += "        </td>";
    newSelect += "    </tr>";
    newSelect += "</table>";
    document.write(newSelect);

    var haveSelectedValue = false;
    for (var i=0 ; i < obj.options.length ; i++) {
        if (obj.options[i].selected == true) {
            haveSelectedValue = true;
            settingValue(objId,obj.options[i].text);
        }
    }
    if (!haveSelectedValue) settingValue(objId,obj.options[0].text);
}

document.onmousedown = clickMouse;

[本日志由 Huison 于 2006-09-23 10:51 AM 编辑]