关于圆角<input type='color'>控件在Safari中输入值后变方形的问题

这个问题我之前也踩过坑，Safari对颜色输入框的样式处理确实有点“轴”——当你手动输入颜色值后，它会悄悄重置原生内部元素的样式，把你设置的圆角直接抹掉。不过别担心，只要针对它的webkit专属伪元素做精准控制就能搞定。

核心原因 #

Safari的<input type="color">内部包含两个webkit独有的伪元素：::-webkit-color-swatch-wrapper（色板的外层容器）和::-webkit-color-swatch（实际显示颜色的色块）。默认情况下，当用户完成输入交互后，Safari会给这两个元素套上自己的默认样式，直接覆盖你给input本身设置的圆角属性。

解决方案 #

直接针对这两个伪元素设置和input一致的样式，从根源上避免被Safari的原生样式覆盖：

/* 基础的input容器样式 */
input[type="color"] {
  border: none;
  border-radius: 50%; /* 设为50%就是圆形，按需调整数值 */
  width: 40px;
  height: 40px;
  padding: 0; /* 去掉默认内边距，避免挤压圆角显示 */
  cursor: pointer;
}

/* 控制Safari的色板外层容器 */
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 50%; /* 和input保持一致的圆角值 */
}

/* 控制Safari的实际颜色色块 */
input[type="color"]::-webkit-color-swatch {
  border: none; /* 去掉默认的灰色边框 */
  border-radius: 50%; /* 同步圆角设置 */
}

额外注意事项 #

• 确保input的宽高数值一致，这样才能显示为正圆形；如果需要椭圆形，调整宽高比例和border-radius即可。
• 不要依赖overflow: hidden来实现圆角，Safari在交互后可能会忽略这个属性，直接控制伪元素的样式更可靠。
• 测试时记得清空浏览器缓存，有时候旧的缓存样式会干扰测试结果。

这样设置后，不管你是点击选择颜色还是手动输入十六进制颜色值，控件都会稳稳保持你设置的圆角/圆形样式，不会再变回方形啦。

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