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

Question

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

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

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

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

这是我的 style.css 的片段：

/* || 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>

Answer 1

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

1.错误的select或

input .nosubmit 没有指向任何东西。你的 class 被命名为 .no-submit，如果你想 select input 和特定的 class 你必须这样写 input.no-sumbit。您的 select 或正在 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") ;

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

3。当你只需要 background-color

时使用 background

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

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

这是工作代码片段：

/* || 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>

此外，我添加了填充，因此文本不会超出您的放大镜范围。

Answer 2

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

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

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

Search bar with magnifying glass inside using CSS

html

css

forms

search

svg