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

请选择ABCDEFGHI_select横排效果_我们

*{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}

ABCDEFGHI

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 用javascript来实现select标签的美化的代码

    论坛经常有人会问到用CSS如何美化Select标签,其实但凡你看到很酷的都是用javascript来实现的.昨天试着做了一下,基本实现的初级功能.拿出来和大家一起分享一下.先可以看一下预览效果:http://www.iwcn.net/demo/select. [功能需求] 1.调用要方便,做好之后应该像这样: 程序代码 function loadSelect(selectobj){ //传入一个select对象就能将他的样式美化 } 2.不改变原有表单项,表单的页面代码不去破坏: 程序代码 <f

  • select标记美化--JS式插件、后期加载

    select标记美化--JS式插件、后期加载

    <select>标签的外观问题很恼人,各个浏览器都不一致,单单就IE,一个版本就一个长相,还不能用CSS修饰. 在这将本人对<select>的美化方法共享出来.优点: 仍保留使用<select>,仅改变外观,不改变不干预Form行为,后期加载JS.(注:本脚本依赖jQuery) 啥也不说了,都在代码里.效果图在底部. 复制代码 代码如下: $(document).ready(function () { // 找出需要美化的<select>标记,我们用一个cl

  • 用javascript和css模拟select的脚本

    模拟 美化 select_我们 var zQuery=function(ele,tagName,className){ //核心对象 if ( window == this ) return new zQuery(ele,tagName,className); if(!arr){var arr=new Array;} if(ele){ if(ele.constructor!=zQuery){ var elem=typeof(ele)=="object"?ele:document.get

  • js+css实现select的美化效果

    js+css实现select的美化效果

    先给大家看一看美化之后的效果图: CSS: .div-select { border: solid 1px #999; height: 40px; line-height: 40px; cursor: default; } .div-select-text { float: left; background-color: #fff; height: 100%; word-break: keep-all; overflow: hidden; cursor: default; } .div-sele

  • select下拉选择框美化实现代码(js+css+图片)

    select下拉选择框美化实现代码(js+css+图片)

    因为虽然实现起来麻烦点,如果用自带的Select,很简单的就完成了,但是本代码实际上是在向大家讲述一种Js在网页中的应用实战,多种元素之间的配合作用等.效果如下图: 下拉select选择框 body{margin:20px auto;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:950px;height:400px;border:solid 1px #aaa;position:relative;padding:10px;}

  • select标签模拟/美化方法采用JS外挂式插件

    select标签模拟/美化方法采用JS外挂式插件

    <select>标签的外观问题很恼人,各个浏览器都不一致,单单就IE,一个版本就一个长相,还不能用CSS修饰. 在这将本人对<select>的美化方法共享出来.优点: 仍保留使用<select>,仅改变外观,不改变不干预Form行为,后期加载JS.(注:本脚本依赖jQuery) 啥也不说了,都在代码里. 复制代码 代码如下: $(document).ready(function () { // 找出需要美化的<select>标记,我们用一个class名称 &

  • 用javascript实现select的美化的方法

    论坛经常有人会问到用CSS如何美化Select标签,其实但凡你看到很酷的都是用javascript来实现的.昨天试着做了一下,基本实现的初级功能.拿出来和大家一起分享一下.先可以看一下预览效果:http://www.iwcn.net/demo/select. [功能需求] 1.调用要方便,做好之后应该像这样: 复制代码 代码如下: function loadSelect(selectobj){  //传入一个select对象就能将他的样式美化  } 2.不改变原有表单项,表单的页面代码不去破坏:

  • 用JavaScript来美化HTML的select标签的下拉列表效果

    用JavaScript来美化HTML的select标签的下拉列表效果

    首先通过一个例子来回顾一下select标签的用法: <html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">

  • IE6下js通过css隐藏select的一个bug

    今天遇到一个问题, 当隐藏表格行 Tr 时 $id("tr_" + id + "_1").style.setAttribute('cssText',"display:none;");, 表格行 Tr 里面的 select 在 IE6 中隐藏不了,还是会显示在页面当中.想单独设置 select 的样式为隐藏 $id("new_attpm_id2_" + id).style.setAttribute('cssText',"

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

    请选择ABCDEFGHI_select横排效果_我们 *{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-rig

  • js钢琴按钮波浪式图片排列效果代码分享

    js钢琴按钮波浪式图片排列效果代码分享

    本文实例讲述了js钢琴按钮波浪式图片排列效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的钢琴按钮波浪式图片排列效果,鼠标在图片列表上移动,当前图片高亮显示,以此为根基点,周围的图片逐渐变小,所以有种手指划过钢琴键盘的感觉. 运行效果图:                                -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 注意:图片的alt属性不能

  • php 遍历数据表数据并列表横向排列的代码

    复制代码 代码如下: <?php $a = array (1,2,3,4,5,6,7,8,9,10,11); $i = 0; ?> <table border=1> <tr> <? foreach ($a as $k){ if($i%3==0) {//该处表示需要横向排列的列数. echo "</tr><tr>"; } echo "<td>",$k,"</td>&qu

  • JS 动态添加列表框项效果代码

    JS 动态添加列表框项效果代码

    *请选择1-3个知识点. 1213123123 2123123123 3213123213 4123213213 5213123213 6213123213 var addTo = document.getElementById("addto"); var moveBack = document.getElementById("moveback"); var selectLeft = document.getElementById("selectleft&

  • js实现Select列表内容自动滚动效果代码

    js实现Select列表内容自动滚动效果代码

    本文实例讲述了js实现Select列表内容自动滚动效果.分享给大家供大家参考.具体如下: 这里演示的Select列表内容自动滚动效果,文字可自动滚屏,当网页加载完毕后,Select中的内容会一个接一个向上滚动,当然,滚动的参数和速度是可以调节的.或许你会用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-font-scroll-codes/ 具体代码如下: <html> <head> <title&g

  • js实现Select列表各项上移和下移的方法

    js实现Select列表各项上移和下移的方法

    本文实例讲述了js实现Select列表各项上移和下移的方法.分享给大家供大家参考.具体如下: 这里介绍Select列表各项上移和下移的Js代码,可以手功排序,以前我们都见到过的,从事WEB编程的朋友经常会用得到. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-move-up-down-codes/ 具体代码如下: <html> <head> <title>Select列表各项上移和下移</t

  • Vue.js仿Select下拉框效果

    Vue.js仿Select下拉框效果

    本文实例为大家分享了Vue.js仿Select下拉框效果的具体代码,供大家参考,具体内容如下 废话少说,直接上图上代码: 效果图: HEML: <div id="demo"> <h2 class="title">自定义下拉框</h2> <imitate-select h2-value="第一个 Select" v-bind:list="list1"></imitate-se

  • JS+CSS实现大气清新的滑动菜单效果代码

    JS+CSS实现大气清新的滑动菜单效果代码

    本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码.分享给大家供大家参考,具体如下: 这是一款比较大气清新的滑动导航菜单,CSS和JavaScript配合完成,鼠标放到一级菜单上,会滑出二级的菜单,兼容性也不错,适合大多数网站使用,用到两张背景图片,请拷贝图片地址下载图片. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-dqqx-scroll-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC

  • JS+CSS实现的竖向简洁折叠菜单效果代码

    JS+CSS实现的竖向简洁折叠菜单效果代码

    本文实例讲述了JS+CSS实现的竖向简洁折叠菜单效果代码.分享给大家供大家参考,具体如下: 这是一款JS+CSS竖向简洁的折叠菜单,支持三级分类,红色垂直型,个人感觉非常棒,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-zd-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

  • JS实现横向拉伸动感伸缩菜单效果代码

    JS实现横向拉伸动感伸缩菜单效果代码

    本文实例讲述了JS实现横向拉伸动感伸缩菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS实现的纵向拉伸变横向拉伸,动感伸缩菜单,紧身排列的CSS菜单,可用在博客等重要的位置部分作菜单,学习JavaScript前端设计的也可以作为参考范例. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-row-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

随机推荐