在暗模式下禁用时，如何防止只读输入文本字段消失？

Question

我正在尝试创建一个只读文本字段，但每当我将其设置为 readonly 时，它在浅色模式下会变灰。在深色模式下，禁用时，其背景颜色以及字体颜色将变为全黑，从而使字段及其内容不可见

当我尝试使用 CSS 设置样式时

input:read-only:disabled{
  background: #a0a1a7;
  opacity: 0.7;
}

在深色模式和浅色模式下禁用时，它与其他文本字段的颜色不同。

我已尝试将value="readonly" readonly 添加到<input>，但收效甚微。这是它的样子：https://imgur.com/a/4tU4NNC

我宁愿不将其设置为disabled，因为我仍然需要在文本字段中传递数据。知道我可以为此做些什么吗？

不管怎样，我使用的是谷歌浏览器，亮/暗模式设置由系统偏好设置。

Answer 1

您可以使用prefer-color-scheme media query 检测暗模式或亮模式

例如检查this CodePen

或者做这样的事情

@media (prefers-color-scheme: dark) {

  input:read-only {
    background: whie;
  }
}