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

源代码网整理以下<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>

源代码网整理以下<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>

源代码网整理以下<script type="text/javascript">

源代码网整理以下function submitForm(f) {

源代码网整理以下var cb = f.getElementsByTagName("input");

源代码网整理以下var favorites = "favorites=";

源代码网整理以下var isFirst = true;for (var i = 0; i < cb.length; i++) {

源代码网整理以下var curr = cb[i];

源代码网整理以下if (curr.type == "checkbox") {

源代码网整理以下// window.alert(curr.name + ": " + curr.type);

源代码网整理以下if (curr.checked) {

源代码网整理以下if (isFirst) {

源代码网整理以下favorites = "favorites=" + curr.name;

源代码网整理以下isFirst = false;

源代码网整理以下} else {

源代码网整理以下favorites = favorites + "&favorites=" + curr.name;

源代码网整理以下}

源代码网整理以下}

源代码网整理以下}

源代码网整理以下}

源代码网整理以下window.location = f.action + "?" + favorites;

源代码网整理以下}

源代码网整理以下</script>

源代码网整理以下<form method="get" action="">

源代码网整理以下<b>Check your favorite fast food:</b><br/>

源代码网整理以下<ul class="checklist">

源代码网整理以下<li><label><input type="checkbox" name="McDonalds" /><b>McDonalds</b><br/>I"m lovin" it</label></li>

源代码网整理以下<li><label><input type="checkbox" name="BurgerKing" /><b>Burger King</b><br/>Have it your way</label></li>

源代码网整理以下<li><label><input type="checkbox" name="Wendys" /><b>Wendy"s</b><br/>Always fresh, never frozen</label></li>

源代码网整理以下<li><label><input type="checkbox" name="JackInTheBox" /><b>Jack in the Box</b><br/>If it doesn"t get all over the place, it doesn"t belong in your face</label></li>

源代码网整理以下<li><label><input type="checkbox" name="KFC" /><b>KFC</b><br/>Finger lickin" good</label></li>

源代码网整理以下<li><label><input type="checkbox" name="TacoBell" /><b>Taco Bell</b><br/>Think outisde the bun</label></li>

源代码网整理以下</ul>

源代码网整理以下<input type="button" value="Choose" onclick="submitForm(this.form);">

源代码网整理以下</form>