是否可以在输入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;将其放置在标签下方。

标签必须具有与输入ID相同的“ for”属性（以触发输入操作）

我在Code Sandbox

中做了一个简单的例子