使用 CSS 内部带有放大镜的搜索栏答案

【问题标题】：Search bar with magnifying glass inside using CSS使用 CSS 内部带有放大镜的搜索栏
【发布时间】：2022-02-15 18:37:41
【问题描述】：

我正在尝试编写一个带有放大镜图标且没有搜索按钮的搜索栏。我找到了一个示例资源，我的代码基于：Search Icon Inside Input。

我很难让放大镜图标出现。此外，还有搜索栏本身在我的主导航容器中没有垂直对齐的问题。

我正在使用URL Encoder for SVG Tool 的 SVG 工具的 URL 编码器和带有背景标签的字体真棒图标：

<i class="fa-solid fa-magnifying-glass"></i>

这是我的 style.css 的 sn-p：

/* || PRIMARY MENU || */

.primary-nav {
    align-items: center;
    height: 50px;
    left: 0px;
    padding: 15px;
    width: 100%;
    margin: 0px;
    background-color: darkgray;
    display: inline;
    position: fixed;
    top: 70px;
    z-index: 3;
    font-weight: bold;
}

.search-container {
    align-items: center;
    display: flex;
    justify-content: right;
}

form .no-submit {
    width: 180px;
    align-items: center;
    color: white;
    right: 0;
    display: flex;
    padding: 2px;
    border: 1px solid currentColor;
    border-radius: 5px;
    margin: 0 0;
}

input .nosubmit {
    border: 1px solid white;
    width: 100%;
    padding: 9px 4px 9px 4px;
    background-image: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'/%3E%3C/svg%3E") no-repeat 13px center;
    background-position: 10px center;
}

input[type="search"] {
    border: none;
    background: transparent;
    margin: 0;
    padding: 7px 8px;
    font-size: 16px;
    color: inherit;
    border: 1px solid transparent;
    border-radius: inherit;
}

input[type="search"]::placeholder {
    color: white;
}

input[type="search"]:focus {
    box-shadow: 0 0 3px 0 #3f69a8;
    border-color: #3f69a8;
    outline: none;
}

以及我的navigation.php 视图：

 <div class="search-container">
        <form class="no-submit">
            <input class="no-submit" type="search" placeholder="Search..." method="GET">
        </form>
    </div>

【问题讨论】：

您的 HTML 似乎没有在任何地方包含 <i class="fa-solid fa-magnifying-glass"></I>。你能把这些单独的代码放在一起，让我们看看你在做什么吗？
据我了解，您不能将图标标签放入搜索输入中。您必须使用图标的 SVG 版本。所以，我没有在代码中使用<i class="fa-solid fa-magnifying-glass"></I>，而是使用了URL Encoder Tool。
``` input .no-submit { background-image: transparent url("data:image/svg+xml, `` 是 SVG 发挥作用的地方。
最重要的是，您将整个 SVG 放入 url()。您应该只放置一个指向 SVG 文件的链接。此外，您的 CSS 存在太多问题。像错误的选择器.nosubmit 应该是.no-submit，input .no-submit 表示你希望.no-submit 在input 内，而不是input 和.no-submit。

标签： html css forms svg search

【解决方案1】：

你的代码有很多问题，让我们一一解决。

1.错误的选择器

input .nosubmit 没有指向任何东西。你的班级被命名为.no-submit，如果你想用特定班级选择input，你必须这样写input.no-sumbit。您的选择器正在 input 元素中寻找 .no-submit。

2。 background的错误用法

Here 是如何在 CSS 中使用 background 的一个很好的例子。我还没有找到background 的用法，您可以将所有参数写入单个属性中，就像您所做的那样（我并不是说它不起作用），所以我将它解封装为更多属性。当您想在url() 中添加图像时，更好的方法是插入图像的路径，而不是插入 SVG 文件中。例如，我选择了一个随机的放大镜图标并像这样导入它：

 background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg") ;

您也可以导入本地文件，而不必在线。只需更改 SVG 的相对或绝对路径的 URL。

3.当你只需要background-color时使用background

大多数时候这可能无关紧要，但在您的代码中，background: transparent 会删除您的背景图片，因此您需要使用 background-color: transparent。

我相信您的代码中存在更多错误，但这些是最糟糕的错误，您的代码将无法使用它们。

这里是工作代码 sn-p:

/* || PRIMARY MENU || */

.primary-nav {
  align-items: center;
  height: 50px;
  left: 0px;
  padding: 15px;
  width: 100%;
  margin: 0px;
  background-color: darkgray;
  display: inline;
  position: fixed;
  top: 70px;
  z-index: 3;
  font-weight: bold;
}

.search-container {
  align-items: center;
  display: flex;
  justify-content: left;
}

form .no-submit {
  width: 180px;
  align-items: center;
  color: white;
  right: 0;
  display: flex;
  padding: 2px;
  border: 1px solid currentColor;
  border-radius: 5px;
  margin: 0 0;
}

input.no-submit {
  border: 1px solid white;
  width: 100%;
  padding: 9px 4px 9px 4px;
  /* You can use your image but having cleaner code is better, so I suggest saving the file and just linking it*/
  /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'/%3E%3C/svg%3E") ;*/
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg");
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: 10px center;
}

input[type="search"] {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 7px 8px 7px 30px;
  font-size: 16px;
  color: inherit;
  border: 1px solid black;
  border-radius: inherit;
}

input[type="search"]::placeholder {
  color: white;
}

input[type="search"]:focus {
  box-shadow: 0 0 3px 0 #3f69a8;
  border-color: #3f69a8;
  outline: none;
}

<div class="search-container">
  <form class="no-submit">
    <input class="no-submit" type="search" placeholder="Search..." method="GET">
  </form>
</div>

另外，我添加了内边距，这样文本就不会在你的放大镜上。

【讨论】：

【解决方案2】：

放大镜图标出现在谷歌图标中。试试这个代码：

<head>
   <style>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <style>
</head>
<body>
   <i class="material-icons">search</i>
</body>

【讨论】：