Currently, I am working on a Reactjs contact page where I have implemented a focus effect and transition for the textarea. However, I am facing an issue - when I resize the textarea, the transition is also applied to it, which is not desired.
I have added the transition in textarea:focus, but it does not work when I unfocus on the textarea.
Snippet of Relevant Code
ContactPage.css
.container input, .container textarea {
background-color: #00000009;
border: none;
border-bottom: 2px solid #e0e0e0;
outline: none;
resize: vertical;
padding: 0px; /* Ensures even padding on both sides */
transition: 0.25s ease-in-out;
width: 100%;
}
.container input:focus {
border-bottom: 2px solid red;
}
.container textarea:focus {
border-bottom: 2px solid red;
}