<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Amaze UI Admin 404 Examples</title> <meta name="description" content="这是一个404页面"> <meta name="keywords" content="404"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp" /> <link rel="icon" type="image/png" href="assets/i/favicon.png"> <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png"> <meta name="apple-mobile-web-app-title" content="Amaze UI" /> <link rel="stylesheet" href="assets/css/amazeui.min.css"/> <link rel="stylesheet" href="assets/css/admin.css"> <script src="jquery.min.js"></script> <!--<![endif]--> <script src="assets/js/amazeui.min.js"></script> <script src="assets/js/app.js"></script> <style type="text/css"> .search:hover{background-color: #C40A0D;} .search-input { padding: 5px; margin: 0; border: 1px solid #beceeb; } .clear { display: none; position: absolute; width: 16px; height: 16px; margin: 6px 0 0 -20px; background: url(aaa.png) no-repeat; outline: none; } .search-input::-ms-clear { display: none; } .search-input:valid + .clear { display: inline; } </style> </head> <body> <div class="am-dropdown" style=" 100%"> <input type="search" class="search-input" style=" 80%;"> <a href="javascript:;" class="clear" onclick="cssClear();" ></a> <button class="search-btn">取消</button> </input> <ul class="search-content" style=" 80%;display: none;"> <li class="search">fasd</li> <li class="search">fasd2</li> <li class="search">fasd3</li> <li class="search">fasd4</li> </ul> </div> <script type="text/javascript"> $(".search-input").keyup(function () { if($(this).val()==""){ $(".search-btn").html("取消"); $(".search-content").hide(); }else{ $(".search-btn").html("搜索"); $(".search-content").show(); } }); $(".search").click(function () { // body... $(".search-input").val($(this).html()); $(".search-content").hide(); $(".search-btn").html("搜索"); }) function cssClear() { $(".search-input").val(""); $(".search-content").hide(); $(".search-btn").html("取消"); } </script> </body> </html>