幸福なプログラマ

プログラマは幸福になれる。

罫線のついた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;
}

 
textarea こんな感じになります。

参考:textarea with horizontal rule