HTML+CSS 简易搜索框

搜索框是页面中很常见的一种，下面分享一段简单搜索框案例，直接上代码

HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>搜索框</title>
    </head>
    
    <body>
        <div class="search">
            <input type="text" placeholder="请输入..." name="" id="" value="" />
            <button><i>搜索</i></button>
        </div>
    </body>
</html>

CSS部分

        *{
            padding: 0;
            margin: 0;
        }
        .search{
            width: 30%;            
            margin: 100px auto;
            display: flex;
            /*border: 1px solid red;*/
        }
        .search input{
            float: left;//左浮动
            flex: 4;
            height: 30px;
            outline: none;
            border: 1px solid red;
            box-sizing: border-box;//盒子模型，怪异IE盒子模型，width=content+border*2+padding*2
            padding-left: 10px;
        }
        .search button{
            float: right;
            flex: 1;
            height: 30px;
            background-color: red;
            color: white;
            border-style: none;
            outline: none;
        }
        .search button i{
            font-style: normal;
        }
        .search button:hover{
            font-size: 16px;
        }

成品图：