[css] textareaタグをノート風にする方法
こんにちわ。
気分が乗っていない時はめちゃくちゃ字が汚くなる、下駄です。
HTMLのtextareaタグって、とっても簡素な入力フォームですよね。
inputタグで改行ができるという事なんですが、サイズを同じにすると、まるでどっちがどっちなのか判別できなくなります。
そんなtextareaタグにちょこっとデザイン装飾をするだけで、まあまあイケてる要素になる（かもね）というテクニックをお伝えしたいと思います。
inputとtextarea
|
1 2 |
<input style="width:100px;height:20px;border:1px solid #ccc;margin:10px;padding:0;"> <textarea style="width:100px;height:40px;border:1px solid #ccc;margin:10px;padding:0;"></textarea> |
ほら、サイズが違うという点は、全く区別がつかないですね。
textareaは、右下にリサイズできるマークが付いているのでそれでも判別できるかもしれませんが、通常はresize:none;として、表示しないようにしてしまいます。
textareaをノート風にしてみると・・・
|
1 2 3 4 5 6 7 |
textarea.note{ line-height: 20px; background: linear-gradient(to bottom, #eee 1px, white 1px); background-size: 100% 20px; background-origin: content-box; background-attachment: local; } |
上記スタイルをｐセットして、class名に「note」をつけると、
こんな感じになります。
これ、めちゃくちゃ良くないですか？
textareaのデフォルトか、cssプロパティに入れてほしいですよね。
ちょこっと解説
背景色のグラデーションで横１本線を表示するようにしてタイリング表示しているんですが、line-heightとそのグラデーションの幅を合わせることで、書き込む文字列と連動するようにしてます。
当たり前ですが、文字サイズは、その幅よりも小さくしてくださいね。文字を大きくしたい場合は、その幅も大きくする必要があります。
ノートの色は、グラデーションの箇所の色をちょいちょいといじれば変更できるし、textareaタグのpaddingに合わせてノート罫線も自動調整するようにしているので、かなりしっかりとノートになると思います。
ちなみに、firefoxでもoperaでも正常に表示ができましたが、Macでの確認だけなので、MS系のブラウザは見ていません。（あしからず）
使いたくなった人は、今すぐcss書き込みやがれ！！！！