制作一个更漂亮一些的多选列表框

我认为多选列表具有完美的功能——只需按下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>