HTML+CSS 简易搜索框

本文转载自查看原文 2019-08-21 18:06 22412 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;
        }

成品图：

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 利用HTML+css制作简易时钟 html+css 制作简易导航栏 html+css创建提示框 html+css实现简易下拉菜单 HTML/CSS实现的搜索框 html+css—纯手写登录框 HTML+CSS的小实例 html+css导航栏 html+css学习感受 html css 模仿小米官网搜索框