你有没有试过使用outline属性？如果你使用它，请记住可访问性

您可以为输入创建标签并隐藏输入。用一些JavaScript代码就可以实现你想要的

var theInput = document.getElementById("color-picker");
var theLabel = document.getElementById("trigger-color-picker");

theInput.addEventListener("input", function() {
  theLabel.style.background = theInput.value;
}, false);
theInput.dispatchEvent(new Event('input'));  // trigger the input event on load

#trigger-color-picker {
    border: 5px solid black;
    border-radius: 5px;
    width: 207px;
    height: 60px;
    padding: 0px;
    appearance: none;
    cursor: pointer;
    display: block;
 }
 #color-picker{
  display: none;
 }

<!-- some other html up here -->
<div class="color-holder">
    <div class="content">
        <div id="colors">
            <!-- some colors here -->
        </div>
        <label id="trigger-color-picker" for="color-picker"></label>
        <input type="color" id="color-picker">
    </div>
</div>
<!-- some other html down here -->

这里的想法是：输入类型颜色默认有样式，您不能更改它。因此，我们将创建一个自定义的，而不是改变输入样式，我们将改变标签样式

感谢大家的一些想法，但我终于解决了这个问题与::-webkit-color-swatch和::-webkit-color-swatch-wrapper

#color-picker::-webkit-color-swatch {
    border: none;
}

#color-picker::-webkit-color-swatch-wrapper {
    padding: 0px;
}

border: none删除颜色值周围的1px白色轮廓
padding: 0px删除边框和颜色值之间的间隙
显然，还需要添加::-moz-color-swatch和::-moz-color-swatch-wrapper相同的 prop