CSS 实现类似简书的搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框</title>
    <style>
        /*
        relatvie相对定位、absolute绝对定位
        相对定位也可以限制住absolute，但是这里为什么仍然要用absolute，暂时我也说不明白
*/
        .pos_abs{position: absolute;}

        /*初始化样式*/
        #search input{width: 200px;}

        #search input{height: 36px;border-radius: 40px;border: 0.5px solid #f9f9f9;background-color: #eee;padding: 2px 40px 0 20px;outline:none;transition: 1s;}
        #search a{position: absolute;top: 2px;line-height:32px;right: 10px;}

        /*获得焦点之后的样式*/
        #search input:focus{transition: width 1s; width: 300px;}
        #search input:focus + a {top: 3px;right:4px;width:30px;height:30px;border-radius: 50%;background-color: gray;color: #fff;}
    </style>

    <!-- 用的是bootstrap的图标，不使用bootstrap的话自行替换下面的span标签就可以了 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="search" class="pos_abs">
        <input type="text" placeholder="搜索" />
        <a>&nbsp;&nbsp;<span class="glyphicon glyphicon-search"></span></a>
    </div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。