A form has been created for the footer where clicking on an input causes the text and border-bottom to transition from grey to white.
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;
}
The desired outcome is for the inputted text in the form to remain white even when the user clicks off of it (which currently does not happen).
I apologize if this post does not fully comply with the guidelines, as there are many. I have done my best to present the information in a structured manner.