如何为input[type=color]输入框自定义样式？

完全可以实现你需要的自定义效果，核心逻辑是先清除浏览器自带的原生控件默认样式，再针对性设置CSS属性即可，具体操作如下：

• 清除默认样式：给input[type=color]添加appearance: none系列带前缀的属性，抹除不同浏览器的原生控件外观，这是自定义样式的前提。
• 调整尺寸：直接设置width、height属性即可修改输入框的整体大小。
• 调整RGB标识周围空白区域样式：清除默认样式后，background-color属性直接控制该空白区域的背景色，设置padding属性可以调整RGB标识和输入框边缘的间距。

你可以参考以下完整CSS示例：

input[type="color"] {
  /* 清除不同浏览器默认样式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 自定义输入框尺寸 */
  width: 75px;
  height: 30px;
  /* 自定义RGB标识周围空白区域的背景色 */
  background-color: #e8e8e8;
  /* 调整RGB标识和输入框边缘的间距 */
  padding: 3px 5px;
  /* 可选：自定义边框、圆角效果 */
  border: 1px solid #d1d1d1;
  border-radius: 4px;
  cursor: pointer;
}

/* Webkit内核浏览器（Chrome、Edge、Safari）可选优化：调整内部颜色块的样式 */
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 2px;
}

/* Firefox浏览器可选优化：调整内部颜色块的样式 */
input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 2px;
}

效果参考：

提示：以上代码兼容目前所有主流浏览器的稳定版本，如果你需要适配非常旧的浏览器版本，可以额外补充对应内核的私有属性即可。

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