输入框与输入框文本和占位符不透明度

Question

我有一个简单的输入框

<input type="text" placeholder="Account Name">

具有以下样式：

input {
    border-radius: 5px;
    width: 564px;
    opacity: 0.14;
}

我的问题是因为我更改了输入框的不透明度，当在输入框中键入任何文本时，它遵循不透明度（由于低不透明度，文本不可读）。是否有任何方法可以将输入框的不透明度和输入框文本的不透明度分开？

实施例

感谢。

Answer 1

使用Alpha通道（rgba）应用不透明背景而不是不透明度。如果有人想知道如何设置占位符文本的样式，看起来有一个实验性伪元素：::placeholder。

body {
  background-color: #ffd6ed;
}

input {
  background-color: rgba(255, 255, 255, 0.14);
  color: #23a1fc;
}

input::placeholder {
  color: rgba(0, 0, 0, 0.12);
}

<input type="text" placeholder="An example">