[CSS]検索フォームを素敵なデザインするスタイルシート集

検索フォームを素敵なデザインにスタイリングする、クロスブラウザ対応のスタイルシートをCss Finestから紹介します。

6 ways of styling a search form with css
demo

Cssfinest - style 1

HTML

<form id=”searchform1″ method=”get” action=”" >
<input class=”isearch1″ type=”text” name=”keywords” id=”keywords” />
<input class=”ibutton1″ type=”submit” value=”" />
</form>

CSS

/* style1*/
#searchform1 {background:url(images/search1.gif) left top no-repeat; display: block;width: 240px; height: 32px;}
#searchform1 input { display: block; float: left; }
#searchform1 .isearch1 {border:none; background: none;width:190px; color:#464646;padding: 12px 8px;font-size: 10px;}
#searchform1 .ibutton1 {background:none; border:none;margin-top:9px; width:28px; cursor: pointer; }

Cssfinest - style 2

HTML

<form id=”searchform2″ method=”get” action=”" >
<fieldset>
<legend class=”searchhead”>Search</legend>
<input class=”isearch2″ type=”text” name=”keywords” id=”keywords” />
<input class=”ibutton2″ type=”submit” value=”" />
</fieldset>
</form>

CSS

/*style 2*/
#searchform2 {background:#edebec;width:240px;}
#searchform2 .searchhead {color:#464646;}
#searchform2 fieldset {padding:0;}
#searchform2 .isearch2,#searchform2 .ibutton2{vertical-align: middle;margin:0 0 5px 5px;border:none;}
#searchform2 .isearch2 {width:120px; color: #333333;padding: 5px 8px; font-size: 10px;font-weight:700; }
#searchform2 .ibutton2 {background:url(images/search2.jpg) right top no-repeat;width:71px; cursor: pointer; }

Cssfinest - style 3

HTML

<form id=”searchform3″ method=”get” action=”">
<label>Search:</label>
<input class=”isearch3″ type=”text” name=”keywords” id=”keywords” />
<input class=”ibutton3″ type=”submit” name=”submit” value=”"/>
</form>

CSS

/*style3*/
#searchform3 label, .isearch3, .ibutton3{vertical-align: middle;margin:0;}
#searchform3 label{font-weight:700;text-transform:uppercase;margin:5px;}
#searchform3 .isearch3 {font-size:12px;background:#fff;padding:3px;color:#777;border: 1px solid #eaeaea;width:140px;font-weight:700;}
#searchform3 .ibutton3 {border:none;width:52px;height:20px;background:url(images/search3.gif) top right no-repeat; cursor: pointer;outline:none;}

Cssfinest - style 4

HTML

<form id=”searchform4″ method=”get” action=”" >
<input class=”isearch4″ type=”text” name=”keywords” id=”keywords” />
<input class=”ibutton4″ type=”submit” value=”" />
</form>

CSS

/*style 4*/
#searchform4 {background:url(images/search4.gif) left top no-repeat;display: block;width:215px;height:28px;}
#searchform4 input {float:left;}
#searchform4 .isearch4 {border:none;background:none;width:150px;margin:9px;margin-right:0;color:#464646;font-size: 10px;}
#searchform4 .ibutton4 {background:none;border:none;margin-top:6px;width:45px; cursor: pointer; }

Cssfinest -style 5

HTML

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

CSS

/*style5*/
#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; }

Cssfinest - style 6

HTML

<form id=”searchform6″ method=”get” action=”">
<input class= “isearch6″onclick=”this.className= ‘isearch6_on’”onmouseout=”this.className=’isearch6′” type=”text” name=”keywords” id=”keywords”/>
<input class= “ibutton6″onmouseover=”this.className= ‘ibutton6_on’”onmouseout=”this.className=’ibutton6′” type=”submit” value=”"/>
</form>

CSS

    /*style6*/
    #searchform6 {}
    #searchform6 input,#searchform6 button {float:left;border:none;margin:0;}

    #searchform6 .isearch6 {background:url(images/search6.gif) left top no-repeat;width:185px;height:17px;padding:10px;font-size:16px;color:#fff;}
    #searchform6 .isearch6_on {background:url(images/search6.gif) left -38px no-repeat;width:185px;height:17px;padding:10px;font-size:16px;color:#fff;}
    #searchform6 .ibutton6 {background:url(images/search6.gif) top right no-repeat;width:38px;height:38px; cursor: pointer; }
    #searchform6 .ibutton6_on {background:url(images/search6.gif) right -38px no-repeat;width:38px;height:38px; cursor: pointer; }