您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
CSS如何实现搜索框样式?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
这里涉及的是清除input框默认样式和设置聚焦样式;还有就是控制搜索列表的显示,下面直接给除代码,可以去试试效果
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>新浪微博搜索框功能</title> <style type="text/css"> * { padding: 0; margin: 0; } body { font-size: 14px; } #box { width: 600px; margin: 40px auto; } input { width: 240px; height: 24px; line-height: 24px; border: 1px solid gray; padding: 0 10px; background: #eee; outline: none; /* box-shadow: inset 0 0 0px #999; */ /* box-shadow:阴影的设置 */ } input[type="text"]:focus, input[type="password"]:focus { border: 1px solid #eb7350; background: #fff; outline: none; } #suggest { display: none; position: relative; margin-top: -1px; width: 240px; padding-top: 1px; border: 1px solid #369; border-top: 0 none; border-radius: 4px; box-shadow: inset 0 0 2px #999; overflow: hidden; } #suggest a { display: block; color: #f00; height: 24px; line-height: 24px; text-decoration: none; padding: 0 4px; } #suggest a:hover { background: #eee; } #suggest a span { color: #369; } .xiangguan1, .xiangguan2 { font-size: 14px; } .xiangguan1 dl dd, .xiangguan2 dl dd { font-size: 14px; height: 30px; line-height: 30px; padding: 0 0 0 6px; box-sizing: border-box; } .xiangguan1 dl dd:hover, .xiangguan2 dl dd:hover { font-size: 14px; height: 30px; line-height: 30px; background: #eee; color: #f00; cursor: pointer; } </style> </head> <body> <dl id="box"> <dt> <input type="text" name="" id="in" placeholder="大家正在搜:我们来自同一个世界" /> </dt> <dd id="suggest"> <a href="###">搜“ <span></span>”相关微博 </a> <p class="xiangguan1"> <dl> <dd>我们相爱吧</dd> <dd>我们来同一个世界</dd> <dd>我们都有自己的梦想</dd> <dd>我们不曾放弃</dd> </dl> </p> <a href="###">搜“ <span></span>”相关用户 </a> <p class="xiangguan2"> <dl> <dd>我们相爱吧</dd> <dd>我们来同一个世界</dd> <dd>我们都有自己的梦想</dd> <dd>我们不曾放弃</dd> </dl> </p> </dd> </dl> <script type="text/javascript"> window.onload = function () { var obox = document.getElementById("box"); var obj = document.getElementById("in"); var osug = document.getElementById("suggest"); var oa = osug.getElementsByTagName("span"); obj.oninput = obj.onpropertychange = onchange; obj.onblur = function () { disbox() } ; function onchange() { var txt = this.value; var words = txt.length; if (words == 0) { osug.style.display = "none"; } else if (words > 0) { osug.style.display = "block"; var limit if (words <= 8) { limit = txt } else { limit = txt.substring(0, 8) + "..."; } for (var index = 0; len = oa.length, index < len; index++) { oa[index].innerHTML = limit; } } } }; function disbox() { document.getElementById("suggest").style.display = "none"; } </script> </body> </html>
以下是实例:
感谢各位的阅读!看完上述内容,你们对CSS如何实现搜索框样式大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。