0

私はBootstrapにマテリアル デザインを使用しています。下の境界線のみを操作するのではなく、すべての境界線がグラデーションで機能するようにテキストエリアを変更したいと考えています。

クラスの変更を開始しましたが、is-focusedすべての効果を正しく実装できません。

何か案は?

4

1 に答える 1

0

ブートストラップ マテリアル デザインは、下の境界線として狭い背景画像を使用します。

要素の境界に沿ってグラデーションの背景画像を作成するのは難しいでしょう。その代わり。次のように、境界線自体をアニメーション化してみることができます。

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

Codepen デモ

于 2016-05-12T05:45:28.077 に答える