制作一个更漂亮一些的多选列表框
作者：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
投稿猜你喜欢
- TensorFLow能够识别的图像文件，可以通过numpy，使用tf.Variable或者tf.placeholder加载进tensorfl
最近在D4得到一本(美) Penny Mcintire写的《Visual Design for the Modern Web》.突然觉得可用- 最近发现一个叫 Bootstrap 的好东西，Bootstrap 是现在最流行的响应式 CSS 框架，它以移动设备优先，能够快速适应不同设备
- 代码如下:<input name="file" type="file"> formsiz
- 前言或许你已经用过装饰器，它的使用方式非常简单但理解起来困难（其实真正理解的也很简单），想要理解装饰器，你需要懂点函数式编程的概念，pyth
- html页面一般都会指定一个编码，如何获取到是处理html页面的第一步，因为错误的编码必然带来后面处理的问题。这里我用python的正则表达
- 本文实例讲述了Python实现简单生成验证码功能。分享给大家供大家参考，具体如下：验证码一般用来验证登陆、交易等行为，减少对端为机器操作的概
- python库-dotenv包 | .env配置文件背景我们开发的每个系统都离不开配置信息,这些信息都非常敏感,一旦泄露出去后果非常严重,被
- 目的：在numpy数组中知道指定元素的索引函数: np.argwhere>>>x>>>array([[0
- ---- ORACLE数据库由数据文件，控制文件和联机日志文件三种文件组成。由于磁盘空间的变化，或者基于数据库磁盘I/O性能的调
- 本文实例讲述了Python实现的概率分布运算操作。分享给大家供大家参考，具体如下：1. 二项分布（离散）import numpy as np
- 方法1： 用SET PASSWORD命令 首先登录MySQL。 格式：mysql> set password for 用户名@loca
- 代码如下#encoding:utf-8import requestsfrom lxml import etreeimport xlwtimp
- 队、栈和链表一样，在数据结构中非常基础一种数据结构，同样他们也有各种各样、五花八门的变形和实现方式。但不管他们形式上怎么变，队和栈都有其不变
- 这里介绍的是直接在package.json中直接配置使用：1.基础配置"build": { // 这里是el
- LRULRU（Least recently used，最近最少使用）算法根据数据的历史访问记录来进行淘汰数据，其核心思想是“如果数据最近被访
- 看到标题就知道有逗比忘了密码。。。没错就是我。你也忘了密码？ 不要着急！0x00：第一步：运行django shellpython3 man
- 内容有些啰嗦，内容记载了当时遇到了bug以及解决问题的思路。业务场景简述：前端做配置化组件，通过url内的唯一标识，请求后端sql 哪取页面
- 看了很多网上的方法，写入文件后打开文件看确实不再是乱码，但是从文件中读入json时发现了乱码，可能是读文件默认的编码格式不对。下面读写方法可
- 本文实例讲述了Python使用matplotlib绘制三维参数曲线操作。分享给大家供大家参考，具体如下：一 代码import matplot
