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

我有一个简单的输入框输入框VS输入框中输入文本和占位符不透明度

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

与以下样式：

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

我的问题是，因为我已经改变了输入框的不透明度，在输入框内输入任何文本时，会出现不透明度（由于透明度较低，文本不可读）。是否有任何方法将输入框的不透明度和输入框文本的不透明度分开？

例：

Link to this example

感谢。

来源

2017-09-17 Tahmid

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

来源

2017-09-17 02:22:57 stealththeninja

它似乎并不与被输入框内文字工作吗？ – Tahmid

我一定有误读：你想改变文字颜色，而不是占位符？你能帮我理解为什么需要不透明风格吗？ – stealththeninja

不用担心！我感谢帮助！不透明的风格纯粹是出于美学的原因，我有一个渐变背景，所以使输入框半透明给它一个非常酷的效果。 – Tahmid

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

回答

相关问题