0

I'm currently making a contact page in Reactjs. I've added a focus effect and transition to the textarea. The problem is that when I'm resizing the textarea, the transition is also applied to that too, which I don't want.

I've put the transition in textarea:focus, but the transition doesn't apply when I unfocus on it.

Relevent Code

ContactPage.css

.container input, .container textarea {
    background-color: #00000009;
    border: none;
    border-bottom: 2px solid #e0e0e0;
    outline: none;
    resize: vertical;
    padding: 0px; /* Makes padding even 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;
}
Daniel Zhang
  • 191
  • 2
  • 12

2 Answers2

1

You can specify in the the transistion what properties should be affected.

.container input, .container textarea {
    background-color: #00000009;
    border: none;
    border-bottom: 2px solid #e0e0e0;
    outline: none;
    resize: vertical;
    padding: 0px; 
    transition: border-bottom 0.25s ease-in-out; /* By adding border-bottom here, that will be the only property that will change. */
    width: 100%;
}
Steven Kuipers
  • 809
  • 7
  • 19
0

You will need to stop using transition: all and apply transitions to each item manually. Here's a link to all the properties that transition: all would be applying to: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

The other answer mentions border-bottom which works in this specific case, but depending on your text area's styling you'll have to add more transitions. This is what I had to do for my text area which had some dynamic colour/background changes:

transition: border 100ms ease-in, background-color 100ms ease-in,
            box-shadow 100ms ease-in;
Plooftech
  • 1
  • 2