HTML5颜色数据列表默认

问题描述

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

我知道它只接受十六进制值，但作为示例-我只需要一种默认为空的方法，否则在提交表单时必须将其设置为value。

<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>

解决方法

我意识到手册中说“只接受十六进制值”，但是缺少取消设置或未设置颜色的能力吗？离开标准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" />