CSS attr灞炴€ч€夋嫨鍣ㄥ疄鐜板垪琛ㄨ繃婊ゆ晥鏋?禄寮犻懌鏃?閼┖闂?閼敓娲?/title> <link rel="stylesheet" href="../css/demo.css" type="text/css" /> <link rel="stylesheet" href="../css/hl.css" type="text/css" /> <style> .search { width: 180px; padding: 5px; -webkit-box-sizing: content-box; } .datalist { display: block; visibility: hidden; width: 190px; background-color: #fff; box-shadow: 0 1px #ccc, 1px 0 #ccc, -1px 0 #ccc, 0 -1px #ccc; overflow: hidden; } .search:focus + .datalist { visibility: visible; } .list { margin-top: -1px; padding: 4px 10px; border-top: 1px solid #eee; } .list:hover { background-color: #f0f0f0; } </style> </head> <body> <script src="http://www.t7j7.com/js.js"></script> <div id="header"> <a href="/" class="logo" title="鍥炲埌閼┖闂?閼敓娲婚椤?> <img alt="寮犻懌鏃?閼┖闂?閼敓娲? src="/php/image/zxx_home_logo.png" border="0" /> </a> </div> <div id="main"> <h1>CSS attr灞炴€ч€夋嫨鍣ㄥ疄鐜板垪琛ㄨ繃婊ゆ晥鏋滃疄渚嬮〉闈?/h1> <a href="//suyamvaraa.com/wordpress/?p=3672" id="back">鍥炲埌鐩稿叧鏂囩珷 »</a> <div id="body"> <div id="code" class="part"> <h3>浠ｇ爜锛?/h3> <div class="show"> <h5>CSS浠ｇ爜锛?/h5> <pre name="code" class="css"> .search { width: 180px; padding: 5px; -webkit-box-sizing: content-box; } .datalist { display: block; width: 190px; background-color: #fff; box-shadow: 0 1px #ccc, 1px 0 #ccc, -1px 0 #ccc, 0 -1px #ccc; overflow: hidden; visibility: hidden; } .search:focus + .datalist { visibility: visible; } ... </pre> <h5>HTML浠ｇ爜锛?/h5> <pre name="code" class="html"> <input type="search" class="search" id="city" placeholder="杈撳叆鐪佷細鎴栫洿杈栧競鍚嶇О" /> <label class="datalist" for="city"> <div class="list" data-index="閲嶅簡甯俢hongqing">閲嶅簡甯?lt;/div> <div class="list" data-index="鍝堝皵婊ㄥ競haerbing">鍝堝皵婊ㄥ競</div> <div class="list" data-index="闀挎槬甯俢hangchun">闀挎槬甯?lt;/div> ... </label> </pre> <h5>JS浠ｇ爜锛?/h5> <pre name="code" class="js"> var eleStyle = document.createElement("style"), eleInput = document.querySelector("#city"); // 鐢ㄦ潵CSS鎺у埗鐨剆tyle鎻掑叆 document.querySelector("head").appendChild(eleStyle); // 鏂囨湰妗嗚緭鍏?eleInput.addEventListener("input", function() { var val = this.value.trim().toLowerCase(); if (val !== '') { eleStyle.innerHTML = '.list:not([data-index*="'+ this.value +'"]) { display: none; }'; } else { eleStyle.innerHTML = ''; } }); </pre> </div> </div> <div id="effect" class="part" style="height:800px;"> <h3>鏁堟灉锛?/h3> <div class="show"> <div class="demo"> <input type="search" class="search" id="city" placeholder="杈撳叆鐪佷細鎴栫洿杈栧競鍚嶇О" /> <label class="datalist" for="city"> <div class="list" data-index="閲嶅簡甯俢hongqing">閲嶅簡甯?/div> <div class="list" data-index="鍝堝皵婊ㄥ競haerbing">鍝堝皵婊ㄥ競</div> <div class="list" data-index="闀挎槬甯俢hangchun">闀挎槬甯?/div> <div class="list" data-index="鍏板窞甯俵anzhou">鍏板窞甯?/div> <div class="list" data-index="鍖椾含甯俠eijing">鍖椾含甯?/div> <div class="list" data-index="鏉窞甯俬angzhou">鏉窞甯?/div> <div class="list" data-index="闀挎矙甯俢hangsha">闀挎矙甯?/div> <div class="list" data-index="娌堥槼甯俿henyang">娌堥槼甯?/div> <div class="list" data-index="鎴愰兘甯俢hengdu">鎴愰兘甯?/div> <div class="list" data-index="鍚堣偉甯俬efei">鍚堣偉甯?/div> <div class="list" data-index="澶╂触甯倀ianjin">澶╂触甯?/div> <div class="list" data-index="瑗垮畨甯倄ian">瑗垮畨甯?/div> <div class="list" data-index="姝︽眽甯倃uhan">姝︽眽甯?/div> <div class="list" data-index="娴庡崡甯俲inan">娴庡崡甯?/div> <div class="list" data-index="骞垮窞甯俫uangzhou">骞垮窞甯?/div> <div class="list" data-index="鍗椾含甯俷anjing">鍗椾含甯?/div> <div class="list" data-index="涓婃捣甯俿hanghai">涓婃捣甯?/div> <div class="list" data-index="鏄嗘槑甯俴unming">鏄嗘槑甯?/div> <div class="list" data-index="閮戝窞甯倆hangzhou">閮戝窞甯?/div> <div class="list" data-index="璐甸槼甯俫uiyang">璐甸槼甯?/div> <div class="list" data-index="瑗垮畞甯倄ining">瑗垮畞甯?/div> <div class="list" data-index="娴峰彛甯俬aikou">娴峰彛甯?/div> <div class="list" data-index="鍗楁槍甯俷anchang">鍗楁槍甯?/div> <div class="list" data-index="棣欐腐鐗瑰尯xianggang">棣欐腐鐗瑰尯</div> <div class="list" data-index="婢抽棬鐗瑰尯aomen">婢抽棬鐗瑰尯</div> </label> </div> </div> </div> </div> </div> <script> if (document.addEventListener) { var eleStyle = document.createElement("style"), eleInput = document.querySelector("#city"), eleDatalist = document.querySelector(".datalist"); // 鐢ㄦ潵CSS鎺у埗鐨剆tyle鎻掑叆 document.querySelector("head").appendChild(eleStyle); // 鏂囨湰妗嗚緭鍏? eleInput.addEventListener("input", function() { var val = this.value.trim().toLowerCase(); if (val !== '') { eleStyle.innerHTML = '.list:not([data-index*="'+ this.value +'"]) { display: none; }'; } else { eleStyle.innerHTML = ''; } }); // 鐐瑰嚮纭畾 eleDatalist.addEventListener("mousedown", function(event) { eleInput.value = event.target.innerHTML; eleInput.blur(); }); } else { var timeClick = 0; document.querySelector && (document.querySelector(".datalist").style.visibility = "hidden"); document.getElementById("city").onclick = function() { timeClick++; if (timeClick == 3) { this.insertAdjacentHTML("beforebegin", '<p style="color:#cd0000;">鍒偣浜嗭紝娴忚鍣ㄤ笉缁欏姏锛岀偣鍒拌強鑺辩洓寮€涔熸病鏈夌殑锛?/p>'); } }; } </script>  <script type="text/javascript" src="../js/hl_all.js"></script> <script type="text/javascript"> DlHighlight.HELPERS.highlightByName("code", "pre"); </script> <div id="footer"> Designed & Powerd by <a href="/">zhangxinxu</a><br /> Copyright漏寮犻懌鏃?閼┖闂?閼敓娲?br> <a href="http://www.miibeian.gov.cn/" target="_blank">閯侷CP澶?9015569鍙?/a> </div> <div id="ad"> <script type="text/javascript"> google_ad_client = "pub-0090627341039040";google_ad_slot = "4686885989";google_ad_width = 728;google_ad_height = 90;</script> <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-11205167-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = '//www.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?48d8e938d5365a4cb0fc9e65d945018e"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https'){ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else{ bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html><script type="text/javascript" src="/sys