Chrome Beta中input type color结合datalist预设失效，求助修复方案

我用<datalist>给input type="color"配置了颜色预设，代码如下：

<input type="color" list="presetColors">
<datalist id="presetColors">
  <option value="#ff0000"/>
  <option value="#00ff00"/>
  <option value="#0000ff"/>
</datalist>

但在Chrome Beta里，选择预设颜色后输入框显示为白色，功能失效。想问两个问题：Chrome下一正式版会不会也有这个问题？该怎么修复？

关于正式版是否受影响 #

Chrome Beta作为测试通道，核心作用是提前发现并修复bug。这类明显的功能异常属于高优先级问题，通常会在正式版发布前被修复。你可以通过Chromium官方bug追踪系统查看该问题的处理进度，确认是否已有修复方案。

修复方法 #

方法1：修正<option>标签格式 #

部分浏览器对自闭合的<option>标签解析存在兼容问题，将自闭合标签改为完整闭合形式即可：

<input type="color" list="presetColors">
<datalist id="presetColors">
  <option value="#ff0000"></option>
  <option value="#00ff00"></option>
  <option value="#0000ff"></option>
</datalist>

方法2：用JavaScript强制设置颜色 #

如果标签修正无效，可以通过监听输入事件手动控制输入框的显示颜色：

const colorInput = document.querySelector('input[type="color"]');
colorInput.addEventListener('input', function() {
  if (this.value.match(/^#[0-9A-Fa-f]{6}$/)) {
    this.style.backgroundColor = this.value;
  }
});

该方法能绕过浏览器的渲染bug，确保选中的颜色正常显示。

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