0

I'm using Material Design for Bootstrap and I want to change a textarea for it to have all borders to work with the gradient, instead of working only with the bottom border.

I have started to change the class is-focused, but I'm not able to implement all the effects correctly.

Any ideas?

T J
  • 42,762
  • 13
  • 83
  • 138
Richasantos
  • 576
  • 2
  • 8
  • 15

1 Answers1

0

Bootstrap material design uses a narrow background-image as the bottom border.

It'll be tricky to create a gradient background image that runs along the borders of an element. Instead. you can try animating the borders itself like:

.form-group textarea {
  border: 2px solid #D2D2D2;
  transition: border-color 1s;
  background-image:none;
}
.is-focused textarea {
  border: 3px solid #009688;
}

Codepen demo

T J
  • 42,762
  • 13
  • 83
  • 138