[css] textareaタグをノート風にする方法

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

気分が乗っていない時はめちゃくちゃ字が汚くなる、下駄です。
 

HTMLのtextareaタグって、とっても簡素な入力フォームですよね。
 

inputタグで改行ができるという事なんですが、サイズを同じにすると、まるでどっちがどっちなのか判別できなくなります。
 

そんなtextareaタグにちょこっとデザイン装飾をするだけで、まあまあイケてる要素になる(かもね)というテクニックをお伝えしたいと思います。

inputとtextarea

 



 

ほら、サイズが違うという点は、全く区別がつかないですね。
 

textareaは、右下にリサイズできるマークが付いているのでそれでも判別できるかもしれませんが、通常はresize:none;として、表示しないようにしてしまいます。
 

textareaをノート風にしてみると・・・

 

上記スタイルをpセットして、class名に「note」をつけると、

 

こんな感じになります。
 

これ、めちゃくちゃ良くないですか?
 

textareaのデフォルトか、cssプロパティに入れてほしいですよね。
 

ちょこっと解説

背景色のグラデーションで横1本線を表示するようにしてタイリング表示しているんですが、line-heightとそのグラデーションの幅を合わせることで、書き込む文字列と連動するようにしてます。
 

当たり前ですが、文字サイズは、その幅よりも小さくしてくださいね。文字を大きくしたい場合は、その幅も大きくする必要があります。
 

ノートの色は、グラデーションの箇所の色をちょいちょいといじれば変更できるし、textareaタグのpaddingに合わせてノート罫線も自動調整するようにしているので、かなりしっかりとノートになると思います。
 

ちなみに、firefoxでもoperaでも正常に表示ができましたが、Macでの確認だけなので、MS系のブラウザは見ていません。(あしからず)
 

使いたくなった人は、今すぐcss書き込みやがれ!!!!

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です