フォームをクリックすると異なる色が表示される

Question

入力をクリックすると、テキストと境界線がグレーから白に変化するフッターのフォームを作成しました。

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：ユーザーが入力SOMを持っているとき、私が達成したい何

.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; 
} 

ですフォームに入り、それらをクリックすると、帰属するテキストは白のままになります（それはしません）。

申し訳ありませんが、この投稿は完全にルールに従っていない場合、非常にたくさんあります。私は可能な限り最高にこれをフォーマットしようとしました。あなたが好きなトリックを使用することができます

Answer 1

：

input:valid{ 
    color: white; 
} 

はこのCSSを追加し、すべての有効な入力は、白のテキストの色を持っています。

さらに、minlength="4"を入力に追加すると、入力の色を変更するタイミングを決定できます。

何かを書き、試してみてください。

ここでは、あなたがこのcodepen