罫線のついたtextareaをcssで実現する。
ノートみたいな罫線をtextarea内に描画したい場合、以下のようなcssを記述することで実現できます。
textarea { font-size: 15pt; line-height: 31px; padding: 31px; /* テキストエリアに陰をつける */ box-shadow: 0.2em 0.2em 0.5em black; /* 罫線描画(各ブラウザ対応)*/ background-image: -webkit-linear-gradient(left, white 10px, transparent 10px), -webkit-linear-gradient(right, white 10px, transparent 10px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); background-image: -moz-linear-gradient(left, white 10px, transparent 10px), -moz-linear-gradient(right, white 10px, transparent 10px), -moz-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); background-image: -ms-linear-gradient(left, white 10px, transparent 10px), -ms-linear-gradient(right, white 10px, transparent 10px), -ms-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); background-image: -o-linear-gradient(left, white 10px, transparent 10px), -o-linear-gradient(right, white 10px, transparent 10px), -o-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); background-image: linear-gradient(left, white 10px, transparent 10px), linear-gradient(right, white 10px, transparent 10px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); background-size: 100% 100%, 100% 100%, 100% 31px; /* 淡いグレーで枠線を囲む */ border: 1px solid #ccc; }
こんな感じになります。