javascript - 使用引导材料设计为文本区域的所有边框添加渐变

Question

我正在为 Bootstrap 使用 Material Design，我想更改一个 textarea 以使其所有边框都可以使用渐变，而不是仅使用底部边框。

我已经开始更改类is-focused，但我无法正确实现所有效果。

有任何想法吗？

Answer 1

Bootstrap 材料设计使用窄背景图像作为底部边框。

创建沿元素边界运行的渐变背景图像会很棘手。反而。您可以尝试为边框本身设置动画，例如：

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

Codepen 演示