如何移除type="color"的input颜色选择按钮的边框？

你遇到的问题是因为浏览器对type="color"的输入框有特殊默认样式，直接加Tailwind的border-none不会生效——可视的颜色区域是由浏览器自带的伪元素控制的，并非input本身的border。

给你两种可行的解决方案：

方案一：用Tailwind自定义变体类（无需修改配置） #

直接在input标签上添加针对伪元素的样式类，兼容Chrome、Safari和Firefox：

<input type="color" v-model="selectedColor" @input="updateHexValue" class="[&::-webkit-color-swatch]:border-0 [&::-webkit-color-swatch]:rounded-none [&::-moz-color-swatch]:border-0 [&::-moz-color-swatch]:rounded-none">

• [&::-webkit-color-swatch]:border-0 移除Chrome/Safari下颜色选择器的边框
• [&::-moz-color-swatch]:border-0 移除Firefox下的边框
• 如果不需要圆角可以保留rounded-none，需要的话换成你想要的圆角类比如rounded-full

方案二：自定义Tailwind工具类（适合多处复用） #

如果这个样式需要在多个地方使用，推荐在你的CSS文件里添加自定义工具类：

@layer utilities {
  .color-input-no-border {
    &::-webkit-color-swatch {
      @apply border-0 rounded-none;
    }
    &::-moz-color-swatch {
      @apply border-0 rounded-none;
    }
  }
}

然后在input上使用这个类：

<input type="color" v-model="selectedColor" @input="updateHexValue" class="color-input-no-border">

这样就能完全移除颜色选择器的边框，只显示颜色区域了。

内容的提问来源于stack exchange，提问作者tmiliketurtles