html select更改箭头样式,下拉列表-select样式css处理，可改变箭头的颜色

下拉列表-select样式css处理，可改变箭头的颜色

2018-11-26

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;}

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://hiphotos.baidu.com/zhaoxunzhiyin/pic/item/1edddbbfe672c42618d81fc1.jpg";//三角

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 = "

newSelect += "

";

newSelect += "

";

newSelect += "

";

newSelect += "

";

newSelect += "

";

newSelect += "

";

newSelect += "

";

newSelect += "

";

newSelect += "

";

newSelect += "

for (var i=0 ; i < obj.options.length ; i++) {

var nowValue = obj.options[i].value;

var nowText = obj.options[i].text;

newSelect += "

";

newSelect += "

" + nowText + "";

newSelect += "";

newSelect += "

";

}

newSelect += "

";

newSelect += "

";

newSelect += "

";

newSelect += "

";

newSelect += "

";

newSelect += "

newSelect += "

";

newSelect += "

";

newSelect += "

newSelect += "

";

newSelect += "

";

newSelect += "

";

newSelect += "

";

newSelect += "

";

newSelect += "

";

newSelect += "

";

newSelect += "

";

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;

zhaoxunzhiyin

254191016

找寻知音

免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。

http://www.pinlue.com/style/images/nopic.gif