HTML+CSS实现搜索框

汽水猪猪

已于 2023-10-16 11:55:39 修改

阅读量5.5k

点赞数 7

分类专栏： xuexi 文章标签： html css

于 2020-04-04 11:39:00 首次发布

本文链接：https://blog.csdn.net/weixin_43954320/article/details/105307742

版权

xuexi 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

视频创意搬运自油管https://youtu.be/v1PeTDrw6OY @DarkCode
在这里插入图片描述

sousuo.html
<!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>Document</title>
    <link rel="stylesheet" href="sousuo.css">
    <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />
</head>
<body>
    <div class="search-box">
        <input class="search-txt" type="text" name=""
         placeholder="Type to search">
        <a class="search-btn"  >
            <i class="fas fa-search"></i> 
        </a>
     

    </div>
</body>
</html>

sousuo.css
 *{
    margin: 0%;
    padding: 0%;
}

body{
    background:#fb3f51;
}
.search-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #2f3640;
    border-radius: 50px;
    height: 40px;
    padding: 10px;/*四边填充10 */
 } 

.search-box:hover > .search-txt{
    width: 240px;
    padding: 0 6px;
}

.search-box:hover > .search-btn{
    background: #fff;
}
.search-btn {
    color:#fb3f51 ;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background:#2f3640 ;
    display: flex;
    justify-content: center;
    align-items: center;    
    transition: .4s;
}
.search-txt{
    border: none;/*文本框边框 */
    background: none;
    outline: none;/*文本框四周轮廓*/
    float: left;
    padding: 0%;
    color: #fff;
    font-size: 16px;
    transition: .4s;
    line-height: 40px;/*行高，行间距*/
    width: 0px;
}

汽水猪猪

关注

7
点赞
踩
67

收藏

觉得还不错? 一键收藏
3
评论
HTML+CSS实现搜索框

sousuo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
复制链接

扫一扫