html 我想用图片来代替select下拉菜单的按钮。应该怎么做？
2个回答
展开全部
你好，html自带的select元素，是不支持option中带图片的，所有如果想实现的特殊select，必须自己编写一个功能类似select的下拉框
我实现了一个简单的，你看下就会了，我用的箭头代表的三角，你直接把<img src="0.jpg">放在li中即可
<html>
<head>
<style>
ul{list-style-type:none;}
li{border:solid 1px;width:100px;}
.liShow{display:block;background:while;}
.liHide{display:none;background:blue;}
</style>
<script>
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<length;i++){
liArray[i].className="liShow";
}
nextState=0;
break;
case 0:
obj.innerHTML="选择数量↓";
for(;i<length;i++){
liArray[i].className="liHide";
}
nextState=1;
}
}
</script>
</head>
<body>
<ul id="myUl">
<li class="liMenu" onclick="change(this);">选择数量↓</li>
<li value="1" class="liHide">1</li>
<li value="1" class="liHide">2</li>
</ul>
</body>
</html>
我实现了一个简单的，你看下就会了，我用的箭头代表的三角，你直接把<img src="0.jpg">放在li中即可
<html>
<head>
<style>
ul{list-style-type:none;}
li{border:solid 1px;width:100px;}
.liShow{display:block;background:while;}
.liHide{display:none;background:blue;}
</style>
<script>
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<length;i++){
liArray[i].className="liShow";
}
nextState=0;
break;
case 0:
obj.innerHTML="选择数量↓";
for(;i<length;i++){
liArray[i].className="liHide";
}
nextState=1;
}
}
</script>
</head>
<body>
<ul id="myUl">
<li class="liMenu" onclick="change(this);">选择数量↓</li>
<li value="1" class="liHide">1</li>
<li value="1" class="liHide">2</li>
</ul>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
只有用图片+JS 才可以实现的~~~因为下拉框的那个下拉按钮是默认不能被修改的
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
