HTML5 颜色数据列表默认答案

【问题标题】：HTML5 color datalist defaultHTML5 颜色数据列表默认
【发布时间】：2020-08-31 17:53:19
【问题描述】：

我正在寻找一种在使用带有数据列表的 html5 颜色时添加选项“透明”或“_none”的方法。

我知道它只需要十六进制值，但作为一个例子 - 我只需要一种默认为无的方法，否则它必须在表单提交时设置为值。

<input type="color" list="colors" name="bgColor">
<datalist id="colors">
   <option value=" [ _none or transparent etc ] ">
   <option value="#FF0000">
   <option value="#FFFFFF">
   <option value="#0000FF">
</datalist>

【问题讨论】：

标签： html colors datalist

【解决方案1】：

我意识到手册说“只接受十六进制值”，但缺少取消设置或不设置颜色的能力？在应该是标准的 html5 标记中留下这似乎是一个愚蠢的障碍。

function func(val) {

  var bg = document.getElementById('bgColor');
  var sel = document.getElementById('bgColorSelector');

  sel.classList.remove("none");

  bg.value = val;
  if (bg.value == '_none') {
    sel.classList.add("none");
  }

  if (val == "_none") {
    sel.value = '_none';
  }

}


func('_none');

#bgColorSelector.none::before {
  content: " ";
  position: absolute;
  border: 1px solid;
  width: 55px;
  height: 13px;
  margin: 4px 4px 4px 7px;
  background-image: linear-gradient(to bottom right, #FFF 46%, red 50%, #FFF 53%);
}

<h3>Hidden value</h3>
<input id="bgColor" name="bgColor" type="text" value="_none" />

<h3>Selector with clear button</h3>

<input id="bgColorSelector" type="color" list="colors" onchange="func(this.value);" value="_none">
<datalist id="colors">
  <option value="#FFFFFF">
  <option value="#FF0000">
  <option value="#00FF00">
  <option value="#0000FF">
</datalist>

<input name="button" type="button" onclick="func('_none')" value="Clear" />

【讨论】：