css 里的select下拉框怎么可以做成横排的,麻烦了
发布网友
发布时间：2022-05-16 17:30
共3个回答
热心网友
时间：2022-05-16 18:59
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>请选择ABCDEFGHI_select横排效果</title>
</head>
<body>
<style>
*{font-size:12px;}
A.s_l {
BORDER: #dddddd 1px solid;BORDER-right: #dddddd 0px solid; BACKGROUND: #ffffff;PADDING: 4px 6px 2px 6px; TEXT-DECORATION: none;line-height:12px
}
A.s_l:hover {
BORDER: #003366 1px solid;BORDER-right: #dddddd 0px solid; BACKGROUND: #0063dc;COLOR: #ffffff; TEXT-DECORATION: none;line-height:12px
}
A.s_r {
BORDER: #dddddd 1px solid;BACKGROUND: #ffffff; PADDING: 4px 6px 2px 6px; TEXT-DECORATION: none;line-height:12px
}
A.s_r:hover {
BORDER: #003366 1px solid;BACKGROUND: #0063dc;COLOR: #ffffff; TEXT-DECORATION: none;line-height:12px
}
input {BORDER: #aaa 1px solid;width:65px;height:23px;PADDING: 4px 6px 0px 6px;background:url(images/a.jpg) no-repeat 95% center;}
.span1 {position:relative;top:3px;}
.span2 {position:relative;left:-3px;top:1px}
</style>
<span class="span1"><input type="text" value="请选择" onclick="sele(this)"></span>
<span class="span2" id="select" style="display:none"><A class=s_l
href="###">A</A><A class=s_l
href="###">B</A><A class=s_l
href="###">C</A><A class=s_l
href="###">D</A><A class=s_l
href="###">E</A><A class=s_l
href="###">F</A><A class=s_l
href="###">G</A><A class=s_l
href="###">H</A><A class=s_r
href="###">I</A></span>
<script>
function sele(o){
var oobj=document.getElementById("select")
if (oobj.style.display=="none"){
oobj.style.display=""
var obj=oobj.getElementsByTagName("a"),j=obj.length
for (var i=0;i<j;i++){
obj[i].onclick=function(){
o.value=this.innerHTML;
oobj.style.display="none"
}
}
}
else oobj.style.display="none"
}
</script>
</body>
</html>
您可以自己修改相应的样式和代码！希望对您有帮助！
热心网友
时间：2022-05-16 20:17
