Logo

菜单

发布于 2026-01-06 0 阅读
0

如何使用 Tailwind CSS 移除输入类型为 Number 的箭头？DEV 的全球展示挑战赛，由 Mux 呈现：展示你的项目！

如何使用 Tailwind CSS 移除数字输入框中的箭头

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

在使用 Tailwind CSS 设计表单时，您可能需要移除数字输入字段中的默认箭头（也称为微调器）。这些箭头可能会干扰自定义设计，并且难以在不同的浏览器中保持一致的样式。

在本教程中，我们将探讨如何使用 Tailwind CSS 实现此功能，包括内联样式和全局 CSS 方法。我们还将讨论可访问性问题，并提供自定义按钮样式的示例。

问题

默认情况下，浏览器会在<input type="number">元素上添加递增和递减箭头。虽然这些箭头功能实用，但它们通常与自定义设计冲突，并且难以在不同的浏览器中统一样式。

默认数字输入框，带方向键。

解决方案

我们将使用 Tailwind CSS 实用类来移除这些箭头，并创建简洁、自定义的数字输入框。我们还将探讨如何将此样式全局应用于大型项目，以及如何添加易于访问的自定义控件。

内联方法

我们先来看一个使用内联 Tailwind 类的例子：

<form class="max-w-md mx-auto mt-8 p-6 bg-white rounded-lg shadow-md">
  <div class="mb-4">
    <label for="quantity" class="block text-sm font-medium text-gray-700 mb-2">Quantity</label>
    <input type="number" id="quantity" name="quantity" 
      class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm shadow-sm
      focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
      [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
  </div>

  <div class="mb-4">
    <label for="price" class="block text-sm font-medium text-gray-700 mb-2">Price</label>
    <input type="number" id="price" name="price" step="0.01"
      class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm shadow-sm
      focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
      [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
  </div>

  <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors">
    Submit
  </button>
</form>
Enter fullscreen mode Exit fullscreen mode

移除箭头的关键类是：

  • [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;
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. 请确保将此 CSS 文件导入到您的主 Tailwind CSS 文件中或包含在您的 HTML 文件中。

添加这些全局样式后，您可以简化 HTML 代码：

<form class="max-w-md mx-auto mt-8 p-6 bg-white rounded-lg shadow-md">
  <div class="mb-4">
    <label for="quantity" class="block text-sm font-medium text-gray-700 mb-2">Quantity</label>
    <input type="number" id="quantity" name="quantity" 
      class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm shadow-sm
      focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
  </div>

  <div class="mb-4">
    <label for="price" class="block text-sm font-medium text-gray-700 mb-2">Price</label>
    <input type="number" id="price" name="price" step="0.01"
      class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm shadow-sm
      focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
  </div>

  <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors">
    Submit
  </button>
</form>
Enter fullscreen mode Exit fullscreen mode

请注意，我们已经从各个输入框中移除了箭头移除类，因为它们现在由全局 CSS 处理。

添加自定义箭头

移除默认箭头虽然能提升设计一致性，但保持可访问性至关重要。以下是如何创建与表单设计相匹配的自定义、可访问的增减按钮：

<div class="mb-4">
  <label for="quantity" class="block text-sm font-medium text-gray-700 mb-2">Quantity</label>
  <div class="relative flex items-center">
    <input type="number" id="quantity" name="quantity" 
      class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm shadow-sm
      focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
      [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
    <div class="absolute right-0 flex items-center">
      <button type="button" 
              class="px-2 h-full border-l border-gray-300 text-gray-500 hover:text-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
              onclick="document.getElementById('quantity').stepUp()"
              aria-label="Increase quantity">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
        </svg>
      </button>
      <button type="button" 
              class="px-2 h-full border-l border-gray-300 text-gray-500 hover:text-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
              onclick="document.getElementById('quantity').stepDown()"
              aria-label="Decrease quantity">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
        </svg>
      </button>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

关键的无障碍功能和样式改进：

  1. aria-label我们为按钮添加了属性，为屏幕阅读器提供上下文信息。
  2. 现在，各州focus都增加了一个可见的圆环（focus:ring-2 focus:ring-sky-500 focus:ring-offset-2），以提高键盘导航的可见性。
  3. 按钮的样式与输入字段保持一致，从而保持了表单的整体设计。

重要注意事项

您应考虑以下几点：

  1. 辅助功能：虽然移除默认箭头可以改善视觉设计，但保持辅助功能至关重要。务必提供其他方法来增加/减少数值，例如使用带有正确 ARIA 标签的自定义按钮。

  2. 键盘导航：确保您的自定义控件完全可以通过键盘访问。这包括正确的焦点状态以及使用键盘激活按钮的功能。

  3. 跨浏览器兼容性：此解决方案适用于现代浏览器。旧版浏览器可能需要额外的 CSS 或 JavaScript。

结论

通过实施这些技巧，您可以有效地移除项目中所有数字输入框的默认箭头，同时保持可访问性和样式一致性。请务必使用各种输入方式（鼠标、键盘、触摸）和辅助技术测试表单，以确保所有用户都能获得良好的体验。

对于那些希望进一步改进 Tailwind CSS 开发流程的人来说，不妨看看DevDojo Tails 页面构建器，它可以帮助您轻松创建出色的设计。

祝您编程愉快！

文章来源：https://dev.to/bobbyiliev/how-to-remove-arrow-on-input-type-number-with-tailwind-css-5b0f
最大限度地从 Kubernetes...
如何在 Next.js 中实现受保...