Verschiedene Farben beim Klicken

Question

Ich habe ein Formular für eine Fußzeile erstellt, dass, wenn Sie auf eine Eingabe klicken, der Text und Grenze-unten-Übergang von Grau zu Weiß.

Code Pen

HTML:

<div class="footer"> 

<div class="footerContainer"> 

    <form> 

     <input type="text" class="name" placeholder="Name"/> 

     <input type="text" class="subject" placeholder="Subject"/> 

     <input type="tel" class="phone" placeholder="Phone Number"/> 

     <textarea type="text" class="details" placeholder="Details"></textarea> 

     <input type="submit" class="submit" placeholder="Submit"/> 

    </form> 

</div> 

CSS:

.footer{ 
height: 100%; 
width: 100%; 
background-color: grey; 
display: flex; 
justify-content: center; 
align-items: center; 
} 

.footerContainer{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background-color: darkgrey; 
    width: 25%; 
    padding: 2vw; 
    margin: 2vw; 
} 

.name, .subject, .phone{ 
    background-color: transparent; 
    border: 0; 
    border-bottom: solid #bababa 1px; 
    height: 2.8vw; 
    font-size: 2vw; 
    color: #bababa; 
    transition: color linear 0.5s; 
    margin-bottom: 1vw; 
    font-family: 'Lora', sans-serif; 
    width: 100%; 
} 

textarea{ 
    background-color: transparent; 
    border: 0; 
    border-bottom: solid #bababa 1px; 
    height: 10vw; 
    font-size: 2vw; 
    color: #bababa; 
    transition: color linear 0.5s; 
    margin-bottom: 1vw; 
    font-family: 'Lora', sans-serif; 
    resize: none; 
    width: 100%; 
} 

.submit{ 
    float: right; 
    border: 1px solid black; 
    border-radius: 0.4vw; 
    height: 2vw; 
    width: 4.5vw; 
    font-size: 1vw; 
    background-color: #92F398; 
    cursor: pointer; 
} 

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{ 
    color: #bababa; 
    transition: color linear 0.5s; 
} 

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder{ 
    color: white; 
    transition: color linear 0.5s; 
} 

input:focus, textarea:focus{ 
    color: white; 
    border-bottom: solid white 1px; 
    transition: color linear 0.5s; 
} 

input:focus, 
select:focus, 
textarea:focus, 
button:focus { 
    outline: none; 
} 

Was ist Ich mag würde zu erreichen, wenn die Benutzereingabe som hat Alles in die Form und sie klicken darauf, der zugeschriebene Text bleibt weiß (was er nicht tut).

Entschuldigung, wenn dieser Beitrag nicht vollständig den Regeln folgt, gibt es so viele. Ich habe versucht, das so gut wie möglich zu formatieren.

Answer 1

Sie Trick wie verwenden können:

input:valid{ 
    color: white; 
} 

Dieses css, alle gültige Eingabe wird weißer Text Farbe.

Darüber hinaus können Sie hinzufügen minlength="4" Eingabe hinzufügen kann entscheiden, wenn die Eingabe Farbe ändern sollte.

Versuchen Sie, etwas zu schreiben und zu sehen.

Sie sind hier codepen