尝试将 Tailwind CSS 图标放入输入框中

Question

我想在一个输入框的左侧放置一个图标。tailwindcss 有一个 ReactJS 库，其中包含 SVG 和组件作为图标：https://heroicons.com/。

我的组件：

import React from 'react'
import { MailIcon } from '@heroicons/react/solid'

const BlogPost = () => (
  <section className="container-full flex flex-col m-20">
    <h2 className="mx-auto uppercase font-bold">Check my blogpost</h2>
    <form action="POST" className="mx-auto mt-5 w-6/12">
      <label htmlFor="email">
         <MailIcon className="w-8 h-8" />
        <input className="form-input w-full" type="email" name="email" id="email" placeholder="[e-mail]" />
      </label>
    </form>
  </section>
)

export default BlogPost

正如您所看到的，MailIcon组件可以接收tailwindcss。有什么想法将图标嵌入输入内部吗？

- Diesan Romero

Answer 1

你可以使用 position: absolute 将其置于输入框上方，pointer-events-none 可以防止其被点击。

<label htmlFor="email" className="relative text-gray-400 focus-within:text-gray-600 block">

     <MailIcon className="pointer-events-none w-8 h-8 absolute top-1/2 transform -translate-y-1/2 left-3" />

      <input type="email" name="email" id="email" placeholder="[e-mail]" className="form-input w-full">
</label>

演示在这里（附加输入类和普通SVG图标，仅用于演示目的）

- Ihar Aliakseyenka

---

谢谢，那帮了我很多。 - Diesan Romero

如果我已经有一个关联的标签标记，而我还想要一个像$美元符号那样的标签，有没有什么特定的浏览器标准需要牢记？ - undefined

Answer 2

我用tailwindcss实现了以下方式：

<div class="w-2/3 flex justify-end items-center relative">
    <input
       placeholder="Pesquisar"
       class="border border-gray-400 rounded-lg p-4 w-full"
    />
    <img src="/icons/search.svg" class="absolute mr-2 w-10" alt="Search Icon" />
</div>

- Luiz Carlos Muniz

---

这很棒！谢谢。 - Nithur