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

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">

​