Hey there, let me break this down for you...
I'm currently in the process of styling a contact form.
I've managed to change the text color of my input focus to white.
However, when I click away from the form, the inputted text color reverts back to black.
So, here's my query - how can I style the color of the inputted text when I click off the form?
Check out an example below:
* {
background: red;
}
.contact-formula {
height: auto;
width: 100%;
padding-left: 32.5%;
}
input {
width: 50%;
height: 5vh;
display: block;
background: transparent;
border: none;
border-bottom: .25vh solid orange;
}
input[type=submit] {
width: 20%;
margin-top: 2.5vh;
text-align: center;
background: orange;
color: white;
font-size: 2.5vh;
cursor: pointer;
}
textarea {
width: 50%;
background: transparent;
border: none;
border-bottom: .25vh solid orange;
resize: none;
height: 15vh;
}
label {
color: white;
font-size: 2.5vh;
}
::placeholder {
font-size: 3vh;
color: white;
text-transform: uppercase;
}
textarea:focus,
input:focus {
color: white;
font-size: 3vh;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}<div class="contact-formula">
<form name="htmlform" method="post" action="html_form_send.php">
<input type="text" name="first_name" maxlength="50" size="30" placeholder="First Name" autofocus><br>
<input type="text" name="last_name" maxlength="50" size="30" placeholder="Last Name"><br>
<input type="text" name="email" maxlength="80" size="30" placeholder="email"><br>
<textarea name="comments" maxlength="1000" cols="25" rows="6" placeholder="Message"></textarea><br>
<input type="submit" value="Submit">
</form>
</div>I'm looking for some guidance on what I might be missing.
Thanks a bunch in advance!