html怎么写出搜索栏（HTML+CSS实现搜索框）
HTML+CSS实现搜索框：
需求分析：
1 、输入框焦点事件
onfocus:成为焦点, 点击输入框的时候 ，出现闪烁光标 ，此时可以输入内容 。
onblur :失去焦点, 点击页面空白区域 ，光标消失 。此时不可以输入内容 。
2 、获取元素
3 、注册事件
onfocus:成为焦点, 点击输入框的时候 ，出现闪烁光标 ，此时可以输入内容
1) 、显示ul
2) 、自身边框改变 （通过新增search类名）
onblur :失去焦点, 点击页面空白区域 ，光标消失 。此时不可以输入内容
1) 、隐藏ul
2) 、自身边框改变 （通过移除search类名）
代码内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> button, input { border: 0; outline: none; } * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } .mi { position: absolute; left: 346px; top: 25px; width: 538px; height: 36px; border: 2px solid #b1191a; } .mi button { float: left; width: 80px; height: 33px; background-color: #b1191a; font-size: 16px; color: #fff; } .mi input { float: left; width: 454px; height: 33px; padding-left: 10px; padding: 0 10px; font-size: 14px; line-height: 48px; border: 1px solid #e0e0e0; outline: none; transition: all 0.3s; } .mi .search { border: 1px solid #b1191a; } .result-list { display: none; left: 0; top: 48px; width: 454px; border: 1px solid #b1191a; border-top: 0; background: #fff; } .result-list a { display: block; padding: 6px 15px; font-size: 12px; color: #424242; text-decoration: none; } .result-list a:hover { background-color: #eee; } </style> <body> <div class="mi"> <input type="search" name="" id="" placeholder="请输入要的搜索商品"> <button type="button">搜索</button> <ul class="result-list"> <li><a href="#">全部商品</a></li> <li><a href="#">红米手机</a></li> <li><a href="#">小米14S</a></li> <li><a href="#">小米笔记本</a></li> <li><a href="#">小米家电</a></li> <li><a href="#">小米手机</a></li> <li><a href="#">云米空调</a></li> <li><a href="#">云米智能机器人</a></li> </ul> </div> </body> <script> //1.获取元素 let input = document.querySelector(input) let ul = document.querySelector(.result-list) //2.注册事件 //onfocus:成为焦点, 点击输入框的时候 ，出现闪烁光标 ，此时可以输入内容 input.onfocus = function(){ console.log(点击了 ，出现光标了 ，此时可以输入文字) //(1)显示ul ul.style.display = block //(2)自身边框改变 （通过新增search类名） this.classList.add(search) } //onblur :失去焦点, 点击页面空白区域 ，光标消失 。此时不可以输入内容 input.onblur = function(){ console.log(点其他地方了 ，光标消失了 ，此时不可以输入文字) //隐藏ul ul.style.display = none //自身边框改变 （通过移除search类名） this.classList.remove(search) } </script> </html>效果如下：
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！