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

Posted 2021-03-27

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

答案

您可以使用一些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>

另一答案

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

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

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

以上是关于是否可以添加文本（占位符或标签）来输入type =“color”并让它可以点击？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章

如何更改输入标签占位符的语言？

是否可以有条件地仅在 React 的输入标签中呈现占位符属性？

powerpoint中可输入文本的工具

如何在 HTML5 的数字输入中显示占位符的文本

文本输入框＜input＞

如何解决 Firefox 的材料设计输入字段占位符屏幕阅读器问题？