css - 浏览器特定占位符颜色的元素颜色

【问题标题】：css - element color to the browser specific placeholder colorcss - 浏览器特定占位符颜色的元素颜色
【发布时间】：2020-03-14 16:04:14
【问题描述】：

我有一个自定义元素，我希望它的字体颜色与默认输入占位符颜色相同（因浏览器/操作系统而异）。
有没有什么css方式可以根据当前浏览器的默认设置颜色为动态的？
谢谢

【问题讨论】：

【解决方案1】：

您不能直接获取占位符颜色，但可以覆盖它们：

:root {
  --placeholder-color: salmon;
}

*::placeholder {
  color: var(--placeholder-color);
}

.test {
  color: var(--placeholder-color);
}

<input placeholder="Input something..." value="" />
<div class="test">Placeholder Color</div>

或者您可以改用input 标签，并相应地设置placeholder。然后设置它的all: unset，让它看起来像一个普通的div：

.test {
  all: unset;
  display: block;
}

<input placeholder="Input something..." value="" />
<input class="test" disabled="disabled" placeholder="Placeholder Color" />

【讨论】：