html如何将搜索图标放入搜索框中

2021年12月10日 400次阅读 来源: 黑枝

好久没写网页了学到的东西都快要荒废了，正好趁着寒假巩固复习一下。

今天是（如题），《html如何将搜索图标放入搜索框中》

想要在自己的网页上做一个搜索框，但是这个搜索图标属实是有点为难。

于是翻找资料之后大概知晓了做法：《html如何将搜索图标放入搜索框中》

效果图

大致方法：

先做一个div 将搜索框

<input type=”text” placeholder=”并没有什么用的搜索栏” class=”serch”></input>

和

带有链接的搜索图标

<div class=”pic”><a href=”#”><img src=”搜索.png” alt=””></a></div>

放入。

（下面是外面的div的css）

.top1 {
    margin-right: 10px;
    width: 400px;
    height: 40px;
    border: 1px solid #ccc;
    background-color: #f2f2f5;
    margin: 10px 0;
    border-radius: 10px;
}

作为外部的搜索框

（下面为内部真正的搜索框）

.serch {
    height: 40px;
    width: 250px;
    float: left;
    padding: 0 8px;
    outline: none;
    background-color: #f2f2f5;
    border:none;
    border-radius: 10px;
}

为了美观，我们使用outline:none; 和border:none;消去原本的边框。

（最后是搜索图片的css）

.pic {
    align-items: center;
    height: 30px;
    width: 30px;
    float: right;
    padding-top: 5px;
}
.pic img{
    height: 30px;
    width: 30px;
}

具体的一些小位置可以自己微调。

最后分享一个自己常用的图标网站：

iconfont-阿里巴巴矢量图标库

《html如何将搜索图标放入搜索框中》

这里含有各种各样的小图标，非常适合前端同学学习使用。 

    原文作者：黑枝
    原文地址: https://blog.csdn.net/qq_61851946/article/details/122534723
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞