如何在 HTML/CSS 中的输入类型文本字段中添加图标？ [复制]答案

【问题标题】：How to add an icon to an input type text field in HTML/CSS? [duplicate]如何在 HTML/CSS 中的输入类型文本字段中添加图标？ [复制]
【发布时间】：2021-02-15 21:14:15
【问题描述】：

出于练习目的，我想复制 Google 的前端。我正在努力在 Google 搜索栏中添加“搜索图标”。

在其他文章中，我读到了我已经包含的背景图像属性。但是，我的图像像素很大。我添加了一个“5px”以强调图标应该更小。但是，执行此操作时看不到图标。

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

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) 5px;
  outline: none;
  width: 40%;
  padding: 8px 25px;
  border: 1px solid #DDD;
  border-radius: 25px;
  margin: 20px;
}

<div>
  <ul class="nav justify-content-end">
    <li class="nav-item">
      <a class="nav-link" href="image.html">Image Search</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="advanced.html">Advanced Search</a>
    </li>
  </ul>
</div>
<container>
  <div class="image-box">
    <center>
      <img alt="Google" height="92" src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png">
    </center>
  </div>
  <div>
    <center>
      <form action="https://google.com/search">
        <input type="text" name="q"><br>
        <input type="submit" value="Google Search">
        <input type="submit" value="I'm Feeling Lucky">
      </form>
    </center>
  </div>
</container>

提前致谢！

【问题讨论】：

这能回答你的问题吗？ Put icon inside input element in a form

标签： html css flexbox

【解决方案1】：

像这样添加背景大小是行不通的。原因是background-image 属性不支持放置背景尺寸。它只支持图像链接和渐变本身。

但是，那里有一整套物业等着你 - 它叫做background-size。

您基本上在此属性中指定背景大小的宽度和高度。您也可以在这里使用cover 和contain 关键字。

所以在你的情况下你需要：

background-size: 5px 5px;

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

background-repeat: no-repeat;

你也可以这样定位（根据自己的喜好调整）

background-position: 10% 10%;

如果您想将所有这些都放在同一个属性中，您可以查找所有这些值的简写 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; 
}

【讨论】：

非常感谢您还解释了每个属性的作用以及我们添加它们的原因。欣赏它！在我选择了合适的位置后，我遇到了我的文本光标与图标相交的问题。我将填充增加到 50 像素，但是您是否知道是否有更简单/更简单的方法来执行此操作？我不想填充输入字段的右侧。另外，想垂直对齐文本和图标。有没有简单的方法来实现这一点？
你好@user13717018！我认为解决这个问题的最好方法是使用绝对定位，但这当然会让人讨厌。对于第二个问题，您应该使用 flexbox。如果您查找它，您会在网上找到许多教程。

【解决方案2】：

添加了背景大小、背景位置和背景重复

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-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png);
    background-size: 20px;
    outline: none;
    width: 40%;
    padding: 8px 25px 8px 40px;
    border: 1px solid #DDD;
    border-radius: 25px;
    margin: 20px;
    background-repeat: no-repeat;
    background-position: 10px;
}

<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>Search!</title>
        <link rel = "stylesheet" href = "style.css">
        <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>
    <body>
        <div>
            <ul class = "nav justify-content-end">
                <li class = "nav-item">
                    <a class= "nav-link" href = "image.html">Image Search</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link" href = "advanced.html">Advanced Search</a>
                </li>
            </ul>
        </div>
        <container>
            <div class = "image-box">
                <center>
                    <img alt = "Google" height = "92" src = "https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png"> 
                </center>
            </div>
            <div>
                <center>
                <form action = "https://google.com/search">
                    <input type = "text" name = "q"><br>
                    <input type = "submit" value = "Google Search">
                    <input type = "submit" value = "I'm Feeling Lucky">
                </form>
                </center>
            </div>  
        </container>
    </body>
</html>

【讨论】：

【解决方案3】：

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

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

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

background-repeat：不重复；

background-size: 12px;

background-position:3% 50%;

运行下面的 sn-p 并告诉我这是否适合您。

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-repeat: no-repeat;
    background-size: 12px;
    background-position:3% 50%;
    outline: none;
    width: 40%;
    padding: 8px 25px;
    border: 1px solid #DDD;
    border-radius: 25px;
    margin: 20px;
}

<div>
            <ul class = "nav justify-content-end">
                <li class = "nav-item">
                    <a class= "nav-link" href = "image.html">Image Search</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link" href = "advanced.html">Advanced Search</a>
                </li>
            </ul>
        </div>
        <container>
            <div class = "image-box">
                <center>
                    <img alt = "Google" height = "92" src = "https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png"> 
                </center>
            </div>
            <div>
                <center>
                <form action = "https://google.com/search">
                    <input type = "text" name = "q"><br>
                    <input type = "submit" value = "Google Search">
                    <input type = "submit" value = "I'm Feeling Lucky">
                </form>
                </center>
            </div>  
        </container>

【讨论】：