页面导航：首页 → 网络编程 → JavaScript → 表单特效 → 正文内容 select横排

css+js实现select列表横向排列效果代码

发布：dxy 字体：[增加减小] 类型：转载

真不错的select横排效果代码，推荐大家阅读，这个思路真不错，太感谢作者了

点击运行可以看到效果:

<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(http://bbs.blueidea.com/attachment.php?aid=90338&noupdate=yes) 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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：select 横排

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：javascript下兼容firefox选取textarea文本的代码
下一篇文章：javascript类型File的Input按钮功能研究

·在百度中搜索关于“css+js实现select列表横向排列效果代码相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

css+js实现select列表横向排列效果代码

文章评论

同类文章

最近更新

热点排行

css+js实现select列表横向排列效果代码

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行