Eingabefeld vs Eingabefeld Text und Platzhalter Opazität

Question

Ich habe ein einfaches Eingabefeld

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

mit den folgenden Arten:

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

Mein Problem ist, weil ich die Undurchsichtigkeit des Eingabefeldes geändert habe Beim Eingeben von Text in das Eingabefeld folgt die Opazität (der Text ist aufgrund der geringen Deckkraft nicht lesbar). Gibt es eine Möglichkeit, die Opazität für das Eingabefeld und die Deckkraft für den Eingabefeldtext separat festzulegen?

Beispiel:

Dank.

Answer 1

Verwenden Sie den Alpha-Kanal (rgba), um einen opaken Hintergrund anstelle der Opazität aufzutragen. Für den Fall, dass sich jemand fragen würde, wie man Platzhaltertext formatieren soll, sieht es so aus, als gäbe es ein experimentelles Pseudoelement: ::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">