HTML input透明搜索框样式，边框半圆形式

最新推荐文章于 2025-05-03 17:55:45 发布

panrunjun

最新推荐文章于 2025-05-03 17:55:45 发布

阅读量6.4k

点赞数 6

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_57980861/article/details/117964051

web前端专栏收录该内容

7 篇文章

订阅专栏

本文分享了一种网页搜索框的设计思路，包括移除input边框，添加右侧搜索图标，以及使用CSS实现边框和半圆角效果。此外，还展示了相关书籍链接的列表，这些链接在鼠标悬停时会有字体大小、颜色和粗细的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看成品：

选中文字链接后触发：

思路：

把input边框去掉，右边加个图片链接，最外边加个大盒子设边框封装起来。

HTML代码：

<div  id="header"> 
            <div id="search">
                <input type="text" value="搜索：">
                <a href="#"><img src="images/搜搜.png" width="25px"/></a>
            </div>
            <div id="text">
                <ul>
                    <li><a href="#">我和我的时光少年</a></li>
                    <li><a href="#">百炼成钢</a></li>
                    <li><a href="#">飞鸟集</a></li>
                    <li><a href="#">庆余年</a></li>
                    <li><a href="#">伪装者</a></li>
                    <li><a href="#">大江大河</a></li>
                    <li><a href="#">斗罗大陆</a></li>
                    <li><a href="#">三国演义</a></li>
                    <li><a href="#">爱情公寓5</a></li>
                    <li><a href="#">摩天大楼</a></li>
                    <li><a href="#">盗墓笔记</a></li>
                    
                </ul>
            </div>
</div>

CSS代码：

#search input {    

        width: 270px;

        height: 35px;

        border: 0;                          //去掉input边框

        font-size: 14px;

        outline: none;

        background-color: rgba(32, 74, 102, 0);

        color: white;

        font-size: 16px;

        margin: 0 10px;
       }


#search{

        width: 320px;

        height: 35px;

        border: 1px solid white;

        border-radius: 30px;                    //把边框设计成半圆

        display:flex;

        margin-top:30px;   
       }


#search a{                                    

    margin-top:5px;

    margin-right:20px;

   }


li{

    margin-top:10px;

    font-size: large;

    list-style: none;
   }


li a{

    text-decoration: none;

    color:white;

   }


//鼠标停留时链接文字变化
li a:hover{

    font-size: x-large;

    color:blue;

    font-weight: bolder;
   }