是否可以添加文本（占位符或标签）来输入type =“color”并让它可以点击？ [关闭]

Question

我有<input type='color' value="#eeeeee">。输入仅显示所选颜色（背景颜色）。有没有办法在这个背景上放置文本（占位符/值）或者可以删除背景颜色？我尝试了一个绝对位置的标签。但它涵盖了颜色选择器。

Answer 1

您可以使用一些js和一个标签

function changeLabel(){
  const color = document.querySelector('#test').value;
  document.querySelector('label[for="test"]').innerHTML = color.toString();
}

window.onload = () => {
  document.querySelector('#test').addEventListener('change', changeLabel);
  changeLabel();
}

<input id="test" type="color" value="#eeeeee" >
<label for="test">init</label>

如果你想要你可以用css隐藏输入（#test{display:hidden;}）

如果要保留颜色，只需将其应用于标签的背景即可。

Answer 2

一种方法是使用position: absolute;为输入设置样式，并使用z-index: -1;将其放置在标签下方。

标签必须具有'for'属性，其值与输入id相同（以触发输入操作）

我在Code Sandbox做了一个简单的例子