一个简单的dropdown(CSS＋jquery）

<!DOCTYPE html> <html> <head> <title>by 司徒正美</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .dropdown{ position: relative; } .dropdown div{ position: relative; width:200px; height:30px; border:1px solid rgb(228,228,228); overflow: hidden; } .dropdown div input{ width:200px; height:30px; border: 0 none; padding-left:10px; position: absolute; top:0px; left:0px; z-index: 1; } .dropdown div .close{ position: absolute; width:40px; height:30px; text-align: center; background: rgb(240, 240 240); border:1px solid rgb(228,228,228); line-height: 30px; color:rgb(228,228,228); z-index: 10; right:0px; top: 0px; } .dropdown select{ -webkit-appearance: none; -moz-appearance: none; position: absolute; border:1px solid rgb(228,228,228); top: 30px; left: 0px; z-index: 0; width:200px; display: none; } .dropdown select:focus{ border:1px solid rgb(228,228,228); } .dropdown.focus select{ display: block; z-index: 2; } .dropdown select option{ padding-top:5px; width:200px; height:30px; line-height: 30px; padding-left: 10px; } </style> <script src="jquery.js"></script> <script> $(function () { $(".close").click(function () { if ($(".dropdown").hasClass("focus")) { $(".dropdown").removeClass("focus") } else { $(".dropdown").addClass("focus") } }) $(".dropdown select").change(function () { $(".dropdown input").val($(this).val()) $(".dropdown").removeClass("focus") }) }) </script> </head> <body> <div class="dropdown"> <div><input placeholder="选择服务类型" readonly><span class="close">X</span></div> <select multiple> <option>1111</option> <option>2222</option> <option>3333</option> <option>4444</option> </select> </div> </body> </html>