如何移除HTML5 color input元素的白色内边框？

你遇到的白色内边框是浏览器对<input type="color">的默认内置样式，常规的border属性无法直接覆盖——这类控件的外观由浏览器原生样式引擎控制，必须先重置其默认外观规则。

解决方法 #

添加跨浏览器的外观重置属性，再配合border: none彻底移除边框：

• 使用-webkit-appearance: none（适配Chrome、Safari等webkit内核浏览器）
• 使用-moz-appearance: none（适配Firefox）
• 使用标准属性appearance: none

修改后的代码示例 #

const pickerElem = document.createElement('input');
pickerElem.setAttribute('type', 'color');
pickerElem.setAttribute('style', 
  "position: absolute; "
  + "top: 10px; left: 10px; "
  + "width: 100px; height: 100px; "
  + "-webkit-appearance: none; "
  + "-moz-appearance: none; "
  + "appearance: none; "
  + "border: none;");
document.body.appendChild(pickerElem);

补充说明 #

重置外观后，你可以完全自定义边框样式，比如设置border: 2px solid #333添加自定义边框，此时不会再出现默认的白色内边框。

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