这是一个简单的下拉清单
CSS
.dropdown-check-list { display: inline-block;}.dropdown-check-list .anchor { position: relative; cursor: pointer; display: inline-block; padding: 5px 50px 5px 10px; border: 1px solid #ccc;}.dropdown-check-list .anchor:after { position: absolute; content: ""; border-left: 2px solid black; border-top: 2px solid black; padding: 5px; right: 10px; top: 20%; -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}.dropdown-check-list .anchor:active:after { right: 8px; top: 21%;}.dropdown-check-list ul.items { padding: 2px; display: none; margin: 0; border: 1px solid #ccc; border-top: none;}.dropdown-check-list ul.items li { list-style: none;}.dropdown-check-list.visible .anchor { color: #0094ff;}.dropdown-check-list.visible .items { display: block;}//标记和脚本
<body> <div id="list1" tabindex="100"> <span >Select Fruits</span> <ul > <li><input type="checkbox" />Apple </li> <li><input type="checkbox" />Orange</li> <li><input type="checkbox" />Grapes </li> <li><input type="checkbox" />Berry </li> <li><input type="checkbox" />Mango </li> <li><input type="checkbox" />Banana </li> <li><input type="checkbox" />Tomato</li> </ul> </div> <script type="text/javascript"> var checkList = document.getElementById('list1'); checkList.getElementsByClassName('anchor')[0].onclick = function (evt) { if (checkList.classList.contains('visible')) checkList.classList.remove('visible'); else checkList.classList.add('visible'); } checkList.onblur = function(evt) { checkList.classList.remove('visible'); } </script></body>
