使用 tailwind css 在设计表单时，您可能希望从数字输入字段中删除默认箭头（也称为旋转器）。这些箭头可能会干扰自定义设计，很难在不同的浏览器中保持一致的风格。

我们将探索如何使用本教程 tailwind css 实现这一点，包括内联风格和全局 css 方法。

在默认情况下，浏览器会朝向 元素添加增减箭头。这些箭头虽然功能齐全，但往往与自定义设计发生冲突，很难在各种浏览器中统一样式。

我们将使用 tailwind css 删除这些箭头并创建干净、自定义的数字输入。我们还将研究如何将这种风格应用于世界上更大的项目。

立即学习“前端免费学习笔记(深入)”；

让我们从一个内部使用 tailwind 类别示例开始:

去除箭头的关键类别是：

• [appearance:textfield]：删除 firefox 默认风格。
• [&::-webkit-outer-spin-button]:appearance-none: 删除 webkit 外部旋转按钮在浏览器中。
• [&::-webkit-inner-spin-button]:appearance-none: 删除 webkit 内部旋转按钮在浏览器中。

对于较大的项目，您可能希望将此样式应用于所有数字输入。您可以通过整体情况 css 文件添加样式做到这一点：

1. 根据你的框架和设置打开你的 global.css 如文件(或等效文件) app.css 或 styles.css）。

2. 添加以下css：
   

/* in your global.css file */
@layer utilities {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
}

1. 确保此 css 将文件导入您的主 tailwind css 或者包含在你的文件中 html 中。

添加这些全局风格后，您可以简化您的内容 html：

请注意，我们已经从各种输入中删除了箭头删除类别，因为它们现在是全球性的 css 处理。

你应该考虑几件事：

1. 删除箭头可能会影响依赖它们的用户。如有必要，请考虑提供替代的递增/递减。

2. 该解决方案适用于现代浏览器。旧浏览器可能需要额外的 css 或 javascript。

3. 如有必要，可以使用 tailwind css 类实现自定义递增/递减按钮。

通过内联或全局实现此功能，您可以有效地从整个项目的数字输入中删除默认箭头。

那些希望进一步改进的人？ tailwind css 开发过程的人，请查看 devdojo tails 页面构建器，它可以帮助您轻松创建惊人的设计。

快乐编码！

以上就是如何使用 Tailwind CSS 删除输入类型 Number 更多关于箭头的详细信息，请关注其他相关文章！