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

Add gradient for all borders of textarea with bootstrap material design

本文关键字：区域 边界 渐变 添加 文本 材料      更新时间：2023-09-26

我使用的是Bootstrap的Material Design，我想更改它的文本区域，使其具有与渐变一起使用的所有边框，而不是仅使用底部边框。

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

有什么想法吗？

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

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

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

Codepen演示

相关文章：