CSS如何实现搜索框样式?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
创新互联是专业的朝阳网站建设公司,朝阳接单;提供成都网站设计、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行朝阳网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
这里涉及的是清除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如何实现搜索框样式大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联行业资讯频道。
文章标题:CSS如何实现搜索框样式
转载来源:https://www.cdcxhl.com/article22/ihidcc.html
成都网站建设公司_创新互联,为您提供网站策划、网站收录、品牌网站制作、云服务器、电子商务、建站公司
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联