我太懂你遇到的这个坑了！默认的<input type="color">控件自带的样式确实有点反直觉——你说的那个“灰色边框”其实真的是控件的背景，而设置border和border-radius后出现的下层小圆形，是浏览器内置的颜色选择器按钮没被完全覆盖导致的。

下面给你一套完整的解决方案，能完美把它改成圆形样式：

核心思路 #

1. 先重置控件的默认外观，干掉浏览器自带的样式限制
2. 针对不同浏览器的内部颜色样本伪元素，统一重置样式，避免残留的小圆形
3. 自定义圆形的尺寸和边框效果

完整CSS代码 #

input[type="color"] {
  /* 清除所有浏览器默认外观 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 重置默认边框和背景，避免干扰 */
  border: none;
  background: transparent;
  /* 设置正圆的尺寸 */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* 可选：添加自定义的边框效果，替代默认的灰色背景视觉 */
  box-shadow: 0 0 0 2px #e0e0e0;
  /* 去掉默认内边距，保证尺寸准确 */
  padding: 0;
}

/* 针对WebKit内核浏览器（Chrome、Safari等）的内部样式重置 */
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

/* 针对Firefox的内部样式重置 */
input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

关键说明 #

• appearance: none是关键，它能让我们完全接管控件的样式，不再受浏览器默认布局的限制
• 必须重置::-webkit-color-swatch和::-moz-color-swatch这些伪元素，不然浏览器内置的颜色样本会在下层显示出小圆形，破坏我们的圆形样式
• 用box-shadow做边框比直接设置border更稳妥，因为直接加border可能会和控件内部样式产生冲突

这样设置后，你的color输入框就会变成一个干净的圆形颜色选择器，完全符合预期啦！

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