HTML+CSS实现搜索框

发布时间：2023-04-22 文章分类：WEB开发, 电脑百科 投稿人：王小丽 字号： 默认 | 大 | 超大 打印

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>

效果如下：
HTML+CSS实现搜索框

标签 , ,