textarea等のフォームを角丸にする。
2009/03/25 11:29
画像を使ったりすればできるんですが、CSSで簡単にできます。
※CSS3を使用するので対応していないブラウザは角張ってます。
CSSソース
input[type="text"],
textarea {
border:2px solid #e8e8e8;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
これで角丸なtextareaが出来上がります。

見づらいですが、綺麗な角丸が簡単に生成できます。
おまけですが、自分が今どの項目を選択しているのかわかりやすくする為にしてあげます。
CSSソース
input[type="text"]:focus,
textarea:focus,
input[type="text"]:hover,
textarea:hover {
border:2px solid #3399FF;
}
こんな感じです。
:focusは選択している時にボーダーの色を変えています。
:hoverはマウスオーバーしたときですね。

選択をするとボーダーの色が変わります。
簡単にフォームをデザインする事ができるので活用してみてください。
Category : (x)HTML , CSS , Web Design
Tags : border-radius, CSS3, textarea, 角丸
Track Back URL
コメントをどうぞ♥