如何在带有占位符文本的输入字段中添加图标

Question

如何添加图标作为输入字段内的占位符文本？该图标位于输入字段之外。我尝试使用填充和边距移动它，但我似乎无法将其精确定位在我想要的位置。

Answer 1

最好的选择是使用 CSS Grid 或 Flexbox 将图标放在包装元素内居中。

您可以在这里阅读有关网格的更多信息：
https ://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

您可以在这里阅读有关 Flexbox 的更多信息：
https: //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

这是使用网格的示例：

body {
  background: #F5F5F6;
}

label {
  display: grid;
  grid-template: 1fr / auto 1fr;
  gap: 12px;
  
  
  border: 1px solid #CFD5DB;
  border-radius: 5px;
  background: #fafafa;
  padding: 12px;
  color: #6C757D;
  cursor: text;
}

label:focus-within {
  border: 1px solid #000;
}

label>input {
  outline: none;
  border: none;
  background: transparent;
}

<label>
  <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
    <circle cx="11" cy="11" r="8"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>
  <input placeholder="Enter Hotel name" type="search" />
</label>

关于此示例，需要注意以下几个重要事项：

• 我使用了一个label元素来包装input. 这为我们提供了单击图标来聚焦输入字段的行为，而无需使用 JavaScript。
• 我用过input[type=search]因为这在语义上更适合您的使用，并且将帮助屏幕阅读器的用户理解文本字段的用途。
• 我使用:focus-within伪选择器来定位和设置label其子级的样式input聚焦
• 我选择使用svg图标，但是img基于图标也可以正常工作。
• 我本可以同样轻松地使用 Flexbox，但我想使用gap包装上的属性label，而不是在图标或输入上设置边距。gap与 Flexbox 的配合方式与与 Grid 的配合方式相同，只是 Safari 仅支持gapGrid 布局。如果您选择 Flexbox 方法，请在子元素之一上使用边距而不是gap。