下拉列表-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