img

分享一个好看的搜索框样式

2020-07-16 0条评论 2.7k次阅读 CSS


源码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Awesome search Box</title>
        <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />
        <style>
            body {
                margin: 0;
                padding: 0;
                background: #e84118;
            }
            .search-box {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: #2f3640;
                height: 40px;
                border-radius: 40px;
                padding: 10px;
                display: flex;
            }
            .search-btn {
                color: #e84118;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: #2f3640;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: 0.4s;
                text-decoration: none;
            }
            .search-txt {
                border: none;
                background: none;
                outline: none;
                padding: 0;
                color: white;
                font-size: 16px;
                transition: 0.4s;
                line-height: 40px;
                width: 0;
            }
            .search-box:hover > .search-txt {
                width: 240px;
                padding: 0 6px;
            }
            .search-box:hover > .search-btn {
                background: white;
            }
        </style>
    </head>
    <body>
        <div class="search-box">
            <input class="search-txt" type="text" placeholder="Type to search" />
            <a class="search-btn" href="#">
                <i class="fas fa-search"></i>
            </a>
        </div>
    </body>
</html>

另一种效果:

<input class="search" type="text" placeholder="搜索...">
.search{
    width:80px;
    height:40px;
    border-radius:40px;
    border:2px solid lightblue;
    position: absolute;
    right:200px;
    outline:none;
    text-indent:12px;
    color:#666;
    font-size:16px;
    padding:0;
    -webkit-transition:width 0.5s;
}
.search:focus{
    width:200px;
}

💬 COMMENT


🦄 支持markdown语法

👋友