如何防止 Tailwind 在聚焦时更改文本输入字段的边框？

Posted 2023-03-07

【中文标题】如何防止 Tailwind 在聚焦时更改文本输入字段的边框？

【英文标题】：How to prevent Tailwind from changing a text input field's border when it's focused on?

【发布时间】：2021-08-28 19:42:36

【问题描述】：

我最近在我的 Next.js 应用程序中升级了 Tailwind 版本，结果出现了一些问题。我注意到，对于具有type="text" 属性的输入字段，它们的边框现在变为不同的颜色——我从未指定过——当它们被关注时。在升级 Tailwind 之前，当文本输入字段悬停并聚焦时，边框颜色保持不变。有趣的是，这不会发生在我的任何其他不包含type="text" 属性的表单字段中。如果有人能解释为什么会发生这种情况以及我该如何解决这个问题，我将不胜感激。

以下是文本输入字段悬停时的图像： Text Input Field While Hovered On (Intended)

这是该文本输入字段的图像，当它被聚焦时： Text Input Field While Focused On (Unintended)

【问题讨论】：

您是从哪个版本升级的？当一个字段被聚焦时，有一个视觉表示通常是一种很好的做法，大多数现代浏览器甚至都有默认样式。要防止默认样式（无论是基于浏览器还是 Tailwind），请查看输入焦点时具有哪些 CSS 属性并将其设置为您喜欢的内容。

@j1mbl3s 我从 1.9 升级到 2.1.4 版本。我最终查看了 Chrome 中的 Styles 选项卡，发现 tailwind.css 文件中有一些与 type="input" 属性的项目相关联的类导致了意外的颜色变化，并且该文件位于 node_modules 文件夹中。如何在不更改文件本身的情况下禁用这些类？我可以在 tailwind.config.js 文件中做些什么吗？

如果不删除一些 Tailwind 层，我认为在 tailwind.config.js 中这是不可能的，但是您可以尝试在 CSS 中添加类似这样的内容：*:focus thePropertyApplyingTheBorder: 'theValueYouWant'; 或类似内容。

@j1mbl3s 嗯，很遗憾听到这个消息。澄清一下，*:focus thePropertyApplyingTheBorder: 'theValueYouWant'; 中冒号前的星号是什么？我注意到在 tailwind.css 文件中，星号 * 应用了我试图取消的样式。在 tailwind.css 中，我相信 * 表示框阴影。

* 选择器是通配符选择器。本质上，*:focus 选择带有 :focus 伪类的任何内容

【参考方案1】：

据我所知，表单插件在输入周围放置了一个边框和环形属性。

您可以通过设置focus:ring-0 并用focus:border-none 覆盖边框颜色来移除蓝色默认环，或者您可以将它们替换为您选择的颜色。

【参考方案2】：

原来我需要做的就是删除我在tailwind.config.js 中包含的tailwindcss/forms 插件。

【讨论】：

非常感谢您回答您自己的问题，我花了几个小时试图摆脱那个该死的东西，而您的回答为我做到了。干杯。

@bemontibeller 太棒了！我很高兴听到我也能帮助别人:)

尽管如此，问题还没有完全解决。放大组件，我可以看到 Tailwind 表单插件在 focus 时添加了第二个蓝色边框，此外还有您自己的彩色焦点边框。我无法弄清楚是什么原因造成的：\。现在我像你一样禁用表单插件，但从长远来看，我实际上想使用表单插件，所以如果有人知道发生了什么会很好。

设置 focus:ring-0 和 focus:border-none 以去除颜色。或者如果你想添加你自己的颜色:)