当前位置：首页 > 文章列表 > 文章 > 前端 > 如何使用 Tailwind CSS 删除输入类型 Number 上的箭头

如何使用 Tailwind CSS 删除输入类型 Number 上的箭头

来源：dev.to 2024-07-11 12:54:53 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《如何使用 Tailwind CSS 删除输入类型 Number 上的箭头》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

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

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

问题

默认情况下，浏览器会向 <input type="number"> 元素添加递增和递减箭头。虽然功能齐全，但这些箭头经常与自定义设计发生冲突，并且很难在各种浏览器中统一样式。

如何使用 Tailwind CSS 删除输入类型 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>
    &lt;input type=&quot;number&quot; id=&quot;quantity&quot; name=&quot;quantity&quot; 
      class=&quot;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] [&amp;::-webkit-outer-spin-button]:appearance-none [&amp;::-webkit-inner-spin-button]:appearance-none&quot;&gt;
  </div>

  <div class="mb-4">
    <label for="price" class="block text-sm font-medium text-gray-700 mb-2">price</label>
    &lt;input type=&quot;number&quot; id=&quot;price&quot; name=&quot;price&quot; step=&quot;0.01&quot;
      class=&quot;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] [&amp;::-webkit-outer-spin-button]:appearance-none [&amp;::-webkit-inner-spin-button]:appearance-none&quot;&gt;
  </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>

移除箭头的关键类是：

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

如何使用 Tailwind CSS 删除输入类型 Number 上的箭头

全球方法

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

根据您的框架和设置打开您的 global.css 文件（或等效文件，如 app.css 或 styles.css）。
添加以下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;
  }
}

确保此 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>
    &lt;input type=&quot;number&quot; id=&quot;quantity&quot; name=&quot;quantity&quot; 
      class=&quot;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&quot;&gt;
  </div>

  <div class="mb-4">
    <label for="price" class="block text-sm font-medium text-gray-700 mb-2">Price</label>
    &lt;input type=&quot;number&quot; id=&quot;price&quot; name=&quot;price&quot; step=&quot;0.01&quot;
      class=&quot;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&quot;&gt;
  </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>

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