CSS：伸缩式搜索框（Bootstrap字体图标）

最新推荐文章于 2024-06-29 19:03:28 发布

自律的阿熊

最新推荐文章于 2024-06-29 19:03:28 发布

阅读量467

点赞数

分类专栏： html+css 文章标签： css bootstrap 前端

本文链接：https://blog.csdn.net/weixin_45670873/article/details/129328782

版权

html+css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该文章展示了如何使用CSS和Bootstrap的字体图标创建一个可伸缩的搜索框。HTML结构包含一个输入框和一个搜索按钮，通过CSS定义了样式，包括清除默认边距，设置定位，以及添加过渡效果来改变输入框的宽度和搜索按钮的背景色。

摘要由CSDN通过智能技术生成

CSS：伸缩式搜索框（Bootstrap字体图标）

1. HTML代码

<body>
    <div class="box">
        <input type="text" name="" class="txt" placeholder="你想搜啥？">
        <a href="#" class="btn">
            <i class="glyphicon glyphicon-search"></i>
        </a>
    </div>
</body>

2. CSS样式代码

		/* 清除浏览器默认的margin和padding */
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            height: 60px;
            background-color: #2f3640;
            border-radius: 60px;
            padding: 10px;
        }

        /* 文本输入框样式 */
        .txt {
            /* 清除边框 */
            border: 0;
            /* 清除轮廓 */
            outline: none;
            float: left;
            height: 40px;
            padding: 0px;
            border-radius: 40px;
            font-size: 16px;
            /* 居中 */
            line-height: 40px; 
            width: 0; 
            background: none;
            color: #FFF;
            /* 过渡时间 */
            transition: all 0.5s;
        }
        /* 文本输入框提示语 */
        .txt::placeholder {
            color: #FFF;
            /* 半透明 */
            opacity: .5;
        }

        /* 搜索按钮样式 */
        .btn {

            float: right;
            width: 40px;
            height: 40px;
            color: #e84118;
            border-radius: 40px;
            font-size: 18px;
            /* flex布局 */
            display: flex;
            /* 水平居中 */
            justify-content: center;
            /* 垂直居中 */
            align-items: center;
            /* 过渡时间 */
            transition: all 0.5s;
        }

        .box:hover .txt {
            width: 200px;
            padding: 0 10px;
        }
        .box:hover .btn {
            background-color: #fff;
        }