怎样修改下拉列表旁边的三角颜色和线框
发布网友
发布时间：2022-05-02 23:15
共1个回答
热心网友
时间：2022-04-23 18:09
<title> 自制列表框 </title>
<style>
.selectDiv { border: 2px solid inset buttonface;}
.optionDiv { border:1px solid black;border-top:0px;position:absolute;visibility:hidden;}
.optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:160%;cursor:default;width:100%;}
.defaultSelect { font-size:11px;font-family:Tahoma;text-align:center;border:1px solid white;cursor:default;width:77px;}
.arrow { font-family:webdings;line-height:13px;border:2px outset buttonhighlight;background-color:red;width:15px;text-align:center;cursor:default;font-size:8px;}
</style>
<SCRIPT LANGUAGE= "JavaScript " DEFER>
//用户变量
var oWhere = document.body;
var OptionText = new Array();
OptionText[0] = "--优秀网站-- ";
OptionText[1] = "CSDN.net ";
OptionText[2] = "蓝色理想 ";
OptionText[3] = "PcHome ";
OptionText[4] = "MSDN.com ";
//下拉菜单主体
var selectDiv = document.createElement( "table ");
var selectDivTR = selectDiv.insertRow();
var defaultValueTD = selectDivTR.insertCell();
var arrow = selectDivTR.insertCell();
with(selectDiv)cellSpacing=0,cellPadding=0,border=0,className= "selectDiv ";
with(defaultValueTD)innerText = OptionText[0],className= "defaultSelect ";
with(arrow)innerText=6,className= "arrow ";
oWhere.appendChild(selectDiv);
//外层Div
var optionDiv = document.createElement( "div ");
//设置下拉菜单选项的坐标和宽度
with(optionDiv.style) {
var select = selectDiv;
var xy = getSelectPosition(select);
pixelLeft = xy[0];
pixelTop = xy[1]+select.offsetHeight;
width = selectDiv.offsetWidth;
optionDiv.className = "optionDiv ";
}
//下拉菜单内容
var Options = new Array();
for (var i=0;i <OptionText.length;i++) {
Options[i] = optionDiv.appendChild(document.createElement( "div "));
}
for (i=0;i <Options.length;i++) {
Options[i].innerText = OptionText[i];
}
oWhere.appendChild(optionDiv);
/*事件*/
//禁止选择文本
selectDiv.onselectstart = function() {return false;}
optionDiv.onselectstart = function() {return false;}
//下拉菜单的箭头
arrow.onmousedown = function() {
this.setCapture();
this.style.borderStyle= "inset ";
}
arrow.onmouseup = function() {
this.style.borderStyle= "outset ";
this.releaseCapture();
}
arrow.onclick = function() {
event.cancelBubble = true;
optionDiv.style.visibility = optionDiv.style.visibility== "visible "? "hidden ": "visible ";
}
document.onclick = function() {
optionDiv.style.visibility = "hidden ";
}
defaultValueTD.onclick = function() {
event.cancelBubble = true;
optionDiv.style.visibility = optionDiv.style.visibility== "visible "? "hidden ": "visible ";
}
//移动Option时的动态效果
for (i=0;i <Options.length;i++) {
Options[i].attachEvent( "onmouseover ",function(){moveWithOptions( "highlight ", "white ")});
Options[i].attachEvent( "onmouseout ",function(){moveWithOptions( " ", " ")});
Options[i].attachEvent( "onmouseup ",selectedText);
}
function moveWithOptions(bg,color) {
with(event.srcElement) {
style.backgroundColor = bg;
style.color = color;
}
}
function selectedText() {
with(event.srcElement) {
defaultValueTD.innerText = innerText;
}
with(defaultValueTD.style)background= "highlight ",color= "white ";
}
/*通用函数*/
//获取对象坐标
function getSelectPosition(obj) {
var objLeft = obj.offsetLeft;
var objTop = obj.offsetTop;
var objParent = obj.offsetParent;
while (objParent.tagName != "BODY ") {
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
return([objLeft,objTop]);
}
</SCRIPT>
