[css]フォームデザインの参考になるサイト

とある用事でフォームページを作っているのですが、ただのフォームじゃ面白くないなー、と思い前からやりたかったフォームのinput要素部分をデザインしてみました。

デザイン参考になるサイトを見つけたのでメモメモ。



・Search Boxes

以下のような感じ。（上記画像用のソースじゃないです。あくまで参考。）

HTML

1. <form id=”searchform5″ method=”get” action=”" >
2. <input class=”isearch5″ type=”text” name=”keywords” id=”keywords” />
3. <input class=”ibutton5″ type=”submit” value=”" />
4. </form>

CSS
#searchform5 {
display: block;
width:272px;
overflow:hidden;
}
#searchform5 input {
float:left;
border:none;
margin:0;
}
#searchform5 .isearch5 {
background:url(images/isearch5.png) left top no-repeat;
width:224px;
height:12px;
padding:8px;
color:#fff;
font-size: 10px;
}
#searchform5 .ibutton5 {
background:url(images/ibutton5.jpg) top left no-repeat;
width:31px;
height:28px;
cursor: pointer;
}

積極的につかっていきたいです。