直接上代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>模拟select控件功能</title> 9 <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 10 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 11 <style> 12 * { 13 margin: 0; 14 padding: 0; 15 } 16 .model_wrap{ 17 position: relative; 18 margin: 10px; 19 width: 200px; 20 line-height: 30px; 21 font-size: 14px; 22 } 23 24 .model_wrap>input{ 25 box-sizing: border-box; 26 padding: 0 10px; 27 width: 100%; 28 height: 30px; 29 border: 1px solid #000; 30 border-radius: 5px; 31 } 32 33 .model_wrap>i{ 34 position: absolute; 35 right: 5px; 36 top: 5px; 37 } 38 39 .model_wrap>ul{ 40 display: none; 41 position: absolute; 42 right: 0; 43 top: 30px; 44 width: 100%; 45 background: #fff; 46 border: 1px solid #c7a055; 47 border-radius: 2px; 48 } 49 50 .model_wrap>ul>li { 51 list-style: none; 52 height: 30px; 53 text-indent: 10px; 54 } 55 </style> 56 </head> 57 58 <body> 59 <div class="model_wrap"> 60 <input type="text" value="请选择..." readonly="readonly"> 61 <i class="fa fa-sort-desc fa-lg"></i> 62 <ul> 63 <li>我的名字是？</li> 64 <li>我的出生地址是？</li> 65 <li>我的生日是？</li> 66 </ul> 67 </div> 68 <script> 69 $(".model_wrap>input").click(change) 70 $(".model_wrap>i").click(change) 71 function change(){ 72 if ($(".model_wrap>ul").css('display') == 'none') { 73 $(".model_wrap>ul").show(); 74 } else { 75 $(".model_wrap>ul").hide(); 76 } 77 } 78 79 80 $(".model_wrap>ul li").click(function () { 81 $(".model_wrap>input").val($(this).text()) 82 $(".model_wrap>ul").hide(); 83 }).mouseover(function () { 84 $(this).css({ 85 "background": "#1e90ff", 86 "color": "#fff", 87 'cursor': 'pointer' 88 }) 89 }).mouseout(function () { 90 $(this).css({ 91 "background": "#fff", 92 "color": "#000" 93 }) 94 }) 95 </script> 96 </body> 97 98 </html>