css 里的select下拉框怎么可以做成横排的，麻烦了

html-css077

css 里的select下拉框怎么可以做成横排的，麻烦了,第1张

您好！您说的这个是用css+js实现的。参考代码如下：

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>请选择ABCDEFGHI_select横排效果</title>

</head>

<body>

<style>

*{font-size:12px}

A.s_l {

BORDER: #dddddd 1px solidBORDER-right: #dddddd 0px solidBACKGROUND: #ffffffPADDING: 4px 6px 2px 6pxTEXT-DECORATION: noneline-height:12px

}

A.s_l:hover {

BORDER: #003366 1px solidBORDER-right: #dddddd 0px solidBACKGROUND: #0063dcCOLOR: #ffffffTEXT-DECORATION: noneline-height:12px

}

A.s_r {

BORDER: #dddddd 1px solidBACKGROUND: #ffffffPADDING: 4px 6px 2px 6pxTEXT-DECORATION: noneline-height:12px

}

A.s_r:hover {

BORDER: #003366 1px solidBACKGROUND: #0063dcCOLOR: #ffffffTEXT-DECORATION: noneline-height:12px

}

input{BORDER: #aaa 1px solidwidth:65pxheight:23pxPADDING: 4px 6px 0px 6pxbackground:url(images/a.jpg) no-repeat 95% center}

.span1{position:relativetop:3px}

.span2{position:relativeleft:-3pxtop: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=0i<ji++){

obj[i].onclick=function(){

o.value=this.innerHTML

oobj.style.display="none"

}

}

}

else oobj.style.display="none"

}

</script>

</body>

</html>

您可以自己修改相应的样式和代码！希望对您有帮助！

<input type="text" id="TextBox_Search" value="请输入搜索的关键字" onFocus="if(this.value=='请输入搜索的关键字'){

this.value=''

}"

onblur="if(this.value==''){

this.value='请输入搜索的关键字'

}"

/>

这段怎么看都别扭，你看看有没有人这样写