制作一个更漂亮一些的多选列表框
作者：Rex Baldrazo 来源：开发者在线 发布时间：2007-10-16 13:04:00
标签：列表框,多选,css,avaScript
我认为多选列表具有完美的功能——只需按下Ctrl键，同时点击鼠标从列表中选择多个项目。以下是一个典型的多选列表框：
选出你最喜爱的快餐：
上面那个列表框的代码如下：
<form method="get" action="">
<b>Check your favorite fast food:</b><br/>
<SELECT MULTIPLE SIZE=5 name="favorites">
<OPTION VALUE="McDonalds">McDonald’s</option>
<OPTION VALUE="BurgerKing">Burger King</option>
<OPTION VALUE="Wendys">Wendy’s</option>
<OPTION VALUE="JackInTheBox">Jack in the Box</option>
<OPTION VALUE="KFC">KFC</option>
<OPTION VALUE="TacoBell">Taco Bell</option>
</SELECT>
<br/><input type="submit" value="Choose">
</form>
事实上，即使你在页面中添加了用法说明，仍然有用户不知道如何使用多选列表框。另外，给每个项目增加额外的标题确实会有帮助，但用一个普通的多选列表框能否达到那个目的，我还不能确定。
不过，我确实清楚知道，用一些CSS和一小段JavaScript，你就能生成一个更漂亮一点的多选列表框，并且还可以建立一个等同于普通多选列表框的URL。那样，你就不用修改处理列表框的后端代码——而只需要美化前端即可。
你首先从CSS开始，建立一个新多选列表框在其中滚动的小区域。我们还可以建立悬浮效果，当鼠标移动到一个项目上时，背景色就会改变，以突出当前选择。
<style>
.checklist {
border: 1px solid #ccc;
list-style: none;
height: 10em;
overflow: auto;
width: 20em;
}.checklist, .checklist li { margin: 0; padding: 0; }
.checklist label {
display: block;
padding: 0 0.2em 0 25px;
text-indent: -25px;
}
.checklist label:hover { background: #777; color: #fff; }
* html .checklist label { height: 1％; }
</style>
0
投稿猜你喜欢
第一次写技术博客，有不尽如人意的地方，还请见谅和指正。为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一- 10月9日是国庆中秋黄金周后上班的第一天，当天近8亿人次逛淘宝，即淘宝网每分钟完成43.47万元的交易，创下国内网购单天交易最高纪录。从销售
- 密码保护是注册过程中的关键环节，尤其是对帐户安全级别比较高的网站，尤其在账号被盗或者涉及安全登录等问题的情况下，密码保护问题作为用户身份识别
- MySQL是一个非常流行的小型关系型数据库管理系统，2008年1月16号被Sun公司收购。目前MySQL被广泛地应用在Internet上的中
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- 研究编码，得知GB2312编码与区位码的关系，尝试之后，得此程序。搜索，似乎没人写，故发此地。1.简述（1）GB2312标准的定义，其实就是
- 不论什么时候，只要系统带有多个设备，而这些设备的性能又各不相同，就存在从慢速设备到快速设备不断更换工作地点以改善系统性能的可能性，这就是缓存
- 在这系列视觉设计的文章间隙插一篇字体单位的文章。前文说了，字体单位应该用em而不用px，原因简单来说就是支持IE6下的字体缩放，在页面中按c
- 1.因为oracle 10g暂时没有与win7兼容的版本，我们可以通过对安装软件中某些文件的修改达到安装的目地。 a)打开“\ORACLE1
- 本节列出了可以运行MySQL的操作系统。我们使用GNU Autoconf，因此将MySQL移植到所有使用Posix线程和C++编译器的现代系
- 说到Javascript的类继承，就必然离不开原型链，但只通过原型链实现的继承有着不少缺陷。无参数类继承的问题先看一段示例代码，实现B继承于
- 先来看看什么是书签查找： 当优化器所选择的非聚簇索引只包含查询请求的一部分字段时，就需要一个查找（lookup）来检索其他字段来满足请求。对
- XML的嵌套处理 一般情况下，我们从数据库中查询得到的结果集可能很大，所以从服务器返回到客户端时，数据会被分成若干个页面分别进行传递。此时，
- 页签的流行自从Yahoo!的首页引进页签（tab, 见下图）之后，这种可用性极佳的方式越来越受欢迎，用户也逐步习惯和喜欢上它，因为它可以在原
- 什么是索引 拿汉语字典的目录页（索引）打比方：正如汉语字典中的汉字按页存放一样，SQL Server中的数据记录也是按页存放的，每页容量一般
- 短几年，Google 的 Logo 已经象 Nike 的挑勾和 NBC 的孔雀图案一样著名了。Ruth Kedar，Google
- 之前写过的组织结构和组织体系都太抽象了，读到标签系统我才有那种“略懂”的感觉。哈哈…书上提到的标签包括：导航情境式链接：常见的“更多”这种用
- 终于能出来透口气，写点东西了。前段太忙，也很郁闷，现在调整过来点了。我的设计原则就是在满足需求的前提下，尽可能的简化，简化，再简化。有一次跟
- 一个不错的二级联动下拉菜单源码，您一定会用得到的。运行代码：<html><head><title>Lis
- !important;严格来说，!important;应该不能算作是一种hack技术，被应用了!important;的属性将在IE中无效，对
