輸入框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輸入框中輸入文本和佔位符不透明度

回答

相關問題