如何消除input type="color"边框与选中颜色间的间隙？

问题核心是input[type="color"]在浏览器中有默认的内部渲染边距，即便设置padding: 0和appearance: none也无法完全消除，以下是两种可行的解决方法：

方法一：用box-shadow模拟边框 #

直接修改原CSS，移除input自身边框，改用阴影实现黑色边框，让颜色区域完全填充到阴影边界：

#color-picker {
  border: none; /* 移除原生内部边框 */
  border-radius: 5px;
  width: 207px;
  height: 60px;
  padding: 0;
  appearance: none;
  cursor: pointer;
  background: none;
  box-shadow: 0 0 0 5px black; /* 模拟5px黑色边框 */
  box-sizing: border-box;
}

方法二：通过父容器设置边框 #

把边框样式转移到父容器上，让input完全填充父容器，从根源避免间隙：

修改后的HTML #

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

对应CSS #

.color-picker-wrap {
  border: 5px solid black;
  border-radius: 5px;
  width: 207px;
  height: 60px;
  overflow: hidden; /* 截断input超出部分，保证圆角生效 */
}

#color-picker {
  width: 100%;
  height: 100%;
  padding: 0;
  appearance: none;
  cursor: pointer;
  border: none;
  background: none;
}

两种方法都能彻底消除边框与颜色区域之间的间隙，可根据布局需求选择使用。

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