1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Backbone-test</title> 7 <link rel="stylesheet" href="main.css"> 8 <style> 9 .dropdown{ 10 position: relative; 11 } 12 .dropdown div{ 13 position: relative; 14 200px; 15 height:30px; 16 border:1px solid rgb(228,228,228); 17 overflow: hidden; 18 } 19 .dropdown div input{ 20 200px; 21 height:30px; 22 border: 0 none; 23 padding-left:10px; 24 position: absolute; 25 top:0px; 26 left:0px; 27 z-index: 1; 28 29 } 30 .dropdown div .close{ 31 position: absolute; 32 40px; 33 height:30px; 34 text-align: center; 35 background: rgb(240, 240 240); 36 border:1px solid rgb(228,228,228); 37 line-height: 30px; 38 color:rgb(228,228,228); 39 z-index: 10; 40 right:0px; 41 top: 0px; 42 } 43 .dropdown select{ 44 -webkit-appearance: none; 45 -moz-appearance: none; 46 position: absolute; 47 border:1px solid rgb(228,228,228); 48 top: 30px; 49 left: 0px; 50 z-index: 0; 51 200px; 52 display: none; 53 } 54 .dropdown select:focus{ 55 border:1px solid rgb(228,228,228); 56 } 57 .dropdown.focus select{ 58 display: block; 59 z-index: 2; 60 } 61 .dropdown select option{ 62 padding-top:5px; 63 200px; 64 height:30px; 65 line-height: 30px; 66 padding-left: 10px; 67 } 68 </style> 69 </head> 70 <body> 71 <div class="dropdown"> 72 <div><input placeholder="选择服务类型" readonly><span class="close">X</span></div> 73 <select multiple> 74 <option>1111</option> 75 <option>2222</option> 76 <option>3333</option> 77 <option>4444</option> 78 </select> 79 </div> 80 </body> 81 <script src="lib/jquery.js"></script> 82 <script src="bootstrap.js"></script> 83 <script src="lib/underscore.js"></script> 84 <script src="lib/backbone.js"></script> 85 <script> 86 $(function () { 87 $(".close").click(function () { 88 89 if ($(".dropdown").hasClass("focus")) { 90 $(".dropdown").removeClass("focus") 91 } else { 92 $(".dropdown").addClass("focus") 93 94 } 95 }) 96 $(".dropdown select").change(function () { 97 $(".dropdown input").val($(this).val()) 98 $(".dropdown").removeClass("focus") 99 }) 100 }) 101 </script> 102 </html>
①absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素-相对于 static 定位以外的第一个父元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
②border: 0 none;————宽为0，且样式为无。