HTML
CSS
bootstrap

Bootstrap 4 の textarea 内に罫線を引く


イメージ

ss01.png


方法

textarea {

background-image:
repeating-linear-gradient(
#fff,
#fff calc(1.5rem - 1px),
#ced4da calc(1.5rem - 1px),
#ced4da 1.5rem,
#fff 1.5rem
);
background-origin: content-box;
background-clip: content-box;
background-attachment: local;
}


解説



  • repeating-linear-gradient 関数を使って白い線 (空白) とグレーの罫線を交互に引いています。


    • form-group クラスの line-height 値が 1.5 なので、それに合わせて罫線の高さを計算しています。




  • textarea 要素の padding を考慮するため、background-origin プロパティと background-clip プロパティにそれぞれ content-box を指定しています。


  • background-attachment プロパティに local を指定することで、テキストエリアの内部にスクロールが発生した場合でも罫線がずれないようにしています。


デモ

See the Pen 罫線付きのテキストエリア by QUANON (@quanon) on CodePen.