如何在HTML/CSS中向输入类型文本字段添加图标？_Html_Css_Flexbox

如何在HTML/CSS中向输入类型文本字段添加图标？

html css

如何在HTML/CSS中向输入类型文本字段添加图标？,html,css,flexbox,Html,Css,Flexbox,我想复制谷歌的前端用于实践目的。我正在努力在谷歌搜索栏中添加“搜索图标” 在其他文章中，我阅读了关于背景图像属性的内容，我已经将其包括在内。然而，我的图像是相当大的像素。我添加了一个“5px”来强调图标应该更小。但是，当我这样做时，我看不到图标有人能解释一下我该怎么做吗输入[类型=文本]{ 背景图片：url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vect

我想复制谷歌的前端用于实践目的。我正在努力在谷歌搜索栏中添加“搜索图标”

在其他文章中，我阅读了关于背景图像属性的内容，我已经将其包括在内。然而，我的图像是相当大的像素。我添加了一个“5px”来强调图标应该更小。但是，当我这样做时，我看不到图标

有人能解释一下我该怎么做吗

输入[类型=文本]{
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png)5px；
大纲：无；
宽度：40%；
填充：8px 25px；
边框：1px实心#DDD；
边界半径：25px；
利润率：20px；
}

添加这样的背景尺寸是行不通的。原因是

背景图像

属性不支持放置背景大小。它只支持图像链接和渐变本身

然而，有一个完整的属性在等着你——它被称为

backgroundsize

基本上可以在此属性中指定背景大小的宽度和高度。您也可以在此处使用

封面

和

包含

关键字

因此，在您的情况下，您需要：

background-size: 5px 5px;

但是，您可能会注意到一个问题-有很多搜索图标。我希望你不希望这种事情发生。只需添加以下内容：

background-repeat: no-repeat;

您也可以这样定位（根据您的喜好进行调整）

如果你想把所有这些都放在同一个属性中，你可以在速记

background

属性中查找所有这些值，但有些人会认为这会使阅读代码变得更加困难

input[type=text] { 
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png); 
    background-size: 5px 5px;
    background-repeat: no-repeat;
    background-position: 10% 10%;
    outline: none; 
    width: 40%; 
    padding: 8px 25px; 
    border: 1px solid #DDD; 
    border-radius: 25px; 
    margin: 20px; 
}

添加这样的背景大小不起作用。原因是

背景图像

属性不支持放置背景大小。它只支持图像链接和渐变本身

然而，有一个完整的属性在等着你——它被称为

backgroundsize

基本上可以在此属性中指定背景大小的宽度和高度。您也可以在此处使用

封面

和

包含

关键字

因此，在您的情况下，您需要：

background-size: 5px 5px;

但是，您可能会注意到一个问题-有很多搜索图标。我希望你不希望这种事情发生。只需添加以下内容：

background-repeat: no-repeat;

您也可以这样定位（根据您的喜好进行调整）

如果你想把所有这些都放在同一个属性中，你可以在速记

background

属性中查找所有这些值，但有些人会认为这会使阅读代码变得更加困难

input[type=text] { 
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png); 
    background-size: 5px 5px;
    background-repeat: no-repeat;
    background-position: 10% 10%;
    outline: none; 
    width: 40%; 
    padding: 8px 25px; 
    border: 1px solid #DDD; 
    border-radius: 25px; 
    margin: 20px; 
}

我对你的代码做了一些调整

以下是您可以根据自己的喜好进行调整的附加属性：

编辑：添加CSS属性的链接文档

：无重复

：12px

：3%50%

运行下面的代码片段，让我知道这是否适合您

输入[类型=文本]{
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png);
背景重复：无重复；
背景尺寸：12px；
背景位置：3%50%；
大纲：无；
宽度：40%；
填充：8px 25px；
边框：1px实心#DDD；
边界半径：25px；
利润率：20px；
}

我对您的代码做了一些调整