Having trouble getting my input element to transition properly. It seems like the transition tag is not affecting the input element, and I can't figure out why.
.mainForm {
border-radius: 50px;
border: springgreen 5px solid;
width: 50%;
padding: 50px;
margin-top: 50px;
background-color: rgba(150, 255, 150, 0.5);
}
input {
border: rgba(50, 51, 52, 0.5) solid 5px;
border-radius: 50px;
font-size: 20px;
outline: none;
padding: 10px 25px;
transition: width .35s ease-in-out;
}
input:focus {
width: 75%;
}
button {
border-radius: 50px;
padding: 10px;
border: rgba(50, 51, 52, 0.5) solid 5px;
transition: width .35s ease-in-out;
}
button:hover {
background-color: rgba(50, 51, 52, 0.25)
}<center style="margin-top: 50px;">
<h1 style="display:inline;font-family:courier;">
<span style="font-family:fantasy;">
Google
</span> Search Replica</h1>
<form method="get" action="https://google.com/search" autocomplete="off" class="mainForm">
<input name="q" placeholder="Search...">
<button type="submit"><img src="https://image.flaticon.com/icons/png/512/54/54481.png" width="20px"></button>
</form>
</center>