如何使用 Tailwind CSS 设置 HTML 文件输入的样式？

Question

当我遇到这个问题时，我花了大约 20 分钟在这里的一篇文章中找到答案：https ://www.kindacode.com/snippet/how-to-style-file-inputs-with-tailwind-css/

我在 Stackoverflow 上浏览了很多页关于现有类似问题的过于复杂的答案

将解决方案贴在这里，方便大家快速找到答案

---

按照问题中提供的示例设置输入类型=“文件”按钮的样式，我尝试了一堆不太令人满意的解决方案

我尝试将输入包装在标签元素中并将显示设置为无

<label className="text-sm bg-stone-200 hover:bg-stone-300" htmlFor="fileUpload">
    <input type="file" className="hidden" id="fileUpload"/>
    Upload File
</label>

这是有效的，但是你会丢失文件名预览 - 解决方案涉及<span>在标签和隐藏输入之间放置一个并在 onChange 事件中更改 span 元素。我认为对于这样一个简单的任务来说代码太多了

我还尝试使用元素属性设置大小，<input type="file" size={60} />这显然对其他人有效，但当我尝试时没有效果

Answer 1

解决方案：

<input
   type="file"
   className="text-sm text-stone-500
   file:mr-5 file:py-1 file:px-3 file:border-[1px]
   file:text-xs file:font-medium
   file:bg-stone-50 file:text-stone-700
   hover:file:cursor-pointer hover:file:bg-blue-50
   hover:file:text-blue-700"
/>

无需任何 onChange 事件处理程序或标签包装器即可为我工作

感谢 KindaCode 上的 Pennywise。我在这里找到解决方案的完整文章： https: //www.kindacode.com/snippet/how-to-style-file-inputs-with-tailwind-css/

在 Tailwind CSS 中，您可以将文件修饰符（修饰符只是可以添加到类开头的前缀）与其他实用程序类结合起来，以创建自定义的漂亮文件输入，例如 file:bg-amber-500， file:text-sm 等。当鼠标悬停在文件输入按钮上时，您还可以使用悬停修饰符设置文件输入按钮的样式，如下所示：hover:file:text-amber-700、hover:file:bg-rose- 500等