DN*BLOG

2009.3.25

textarea等のフォームを角丸にする。

画像を使ったりすればできるんですが、CSSで簡単にできます。
※CSS3を使用するので対応していないブラウザは角張ってます。

CSSソース

input[type="text"],
textarea {
	border:2px solid #e8e8e8;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

これで角丸なtextareaが出来上がります。

CSS3で角丸にする
見づらいですが、綺麗な角丸が簡単に生成できます。

おまけですが、自分が今どの項目を選択しているのかわかりやすくする為にしてあげます。

CSSソース

input[type="text"]:focus,
textarea:focus,
input[type="text"]:hover,
textarea:hover {
	border:2px solid #3399FF;
}

こんな感じです。
:focusは選択している時にボーダーの色を変えています。
:hoverはマウスオーバーしたときですね。

フォームの選択をわかりやすくする
選択をするとボーダーの色が変わります。

簡単にフォームをデザインする事ができるので活用してみてください。

FavoriteLoadingAdd to favorites

Category : (x)HTML , CSS , Web Design

関連する記事