如何移除Chrome浏览器中color input的内边距？

一、Chrome中移除color input内边距的方法 #

Chrome的input[type=color]自带浏览器默认的内部样式（包括隐藏的内边距和选择器按钮区域），仅设置padding:0无法覆盖。你需要先通过appearance: none重置浏览器的原生UI样式，再自定义宽高和背景，就能让输入框完全填充父容器：

div {
    border: 3px solid red;
    width: 50px;
    height: 50px;
}

input[type=color] {
    padding: 0;
    background: lightblue;
    border: none;
    width: 100%;
    height: 100%;
    /* 关键：重置Chrome的原生样式 */
    appearance: none;
    /* 可选：去掉聚焦时的默认轮廓，如需自定义聚焦样式可替换 */
    outline: none;
}

/* 可选：自定义聚焦样式，保证可访问性 */
input[type=color]:focus {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #005fcc;
}

对应的HTML保持不变：

<div>
    <input type="color">
</div>

添加appearance: none后，Chrome会移除color input自带的选择器按钮和内部间距，让你的自定义样式完全生效，实现和Firefox一致的效果。

二、是否违反WCAG规范 #

只要不破坏原生color input的可访问性特征，就不会违反WCAG：

• 原生color input本身支持键盘导航（Tab聚焦、方向键选色等），修改样式不会影响这些功能
• 你设置的50x50px点击区域符合WCAG 2.1中「最小44x44px点击目标」的要求
• 只要保证颜色选择器的内容（比如选中的颜色块）和背景有足够对比度，就满足视觉可访问性要求

如果你没有移除原生控件的交互逻辑，只是调整外观，完全符合WCAG规范。

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