FireFox中HTML5 color输入框选中值不更新问题解决咨询

你遇到的是Firefox对type="color"输入框的兼容性bug：当输入框默认值为#000000、#ffffff或者空值时，用户修改颜色后，选择器的预览颜色不会同步更新，但Chrome能正常工作。

修复方法 #

方法1：用JS强制触发UI更新（通用方案）

通过监听input事件，在用户选择颜色后手动重置输入框的value，强迫Firefox更新预览UI。代码如下：

<form>
  <h3>修复后：默认#000000</h3>
  <input type="color" value="#000000" name="bgColor" />

  <h3>修复后：默认#ffffff</h3>
  <input type="color" value="#ffffff" name="fColor" />

  <h3>修复后：无默认值</h3>
  <input type="color" value="" name="oColor" />

  <h3>原本正常：默认#4287f5</h3>
  <input type="color" value="#4287f5" name="o2Color" />
</form>

<script>
document.querySelectorAll('input[type="color"]').forEach(input => {
  input.addEventListener('input', function() {
    const tempVal = this.value;
    // 先清空再赋值，触发Firefox的UI刷新
    this.value = '';
    this.value = tempVal;
  });
});
</script>

方法2：规避特殊默认值（快速方案）

如果业务允许，给原本设为空值或黑白默认值的输入框，换成一个非黑白的初始颜色（比如#cccccc），就能直接绕过这个bug：

<input type="color" value="#cccccc" name="oColor" />

两种方案对比：方法1适配所有场景，不需要修改初始值；方法2更简洁，但依赖业务是否允许调整默认颜色。

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