html网页中select元素设置成disabled后,怎样隐藏或去掉右边的三角箭头_随笔

一般可以自己模拟写一个select的标签的效果，用ul li实现，这样你就可以很好的控制那个箭头了，如果是自带的select应该没法去掉，但是你可以写一个小层比如一个div把它给覆盖，控制这个div的显隐就可以了

select {

/*背景：和其他元素一样，都是设置 background 属性*/

background:#F00

/*三角1：先将默认的select选择框样式清除*/

appearance:none

-moz-appearance:none

-webkit-appearance:none

/*三角2：在选择框的最右侧中间显示小箭头图片*/

background: url('XXXXXX/XXXXXX/XXXXXX/xxxxxx.png') no-repeat scroll right center transparent

/*三角3：为下拉小箭头留出一点位置，避免被文字覆盖*/

padding-right: 14px

}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/

select::-ms-expand { display: none }

你好，html自带的select元素，是不支持option中带图片的，所有如果想实现的特殊select，必须自己编写一个功能类似select的下拉框

我实现了一个简单的，你看下就会了，我用的箭头代表的三角，你直接把<img src="0.jpg">放在li中即可

<html>

<head>

<style>

ul{list-style-type:none}

li{border:solid 1pxwidth:100px}

.liShow{display:blockbackground:while}

.liHide{display:nonebackground:blue}

</style>

var nextState=1

function change(obj){

var liArray=document.getElementsByTagName("LI")

var i=1

var length=liArray.length

switch(nextState){

case 1:

obj.innerHTML="选择数量↑"

for(i<lengthi++){

liArray[i].className="liShow"

}

nextState=0

break

case 0:

obj.innerHTML="选择数量↓"

for(i<lengthi++){

liArray[i].className="liHide"

}

nextState=1

}

</script>

</head>

<body>

</ul>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6261770.html

html网页中select元素设置成disabled后,怎样隐藏或去掉右边的三角箭头

发表评论

评论列表（0条）