[CSS]検索フォームを素敵なデザインするスタイルシート集
Post on:2009年3月4日
sponsors
検索フォームを素敵なデザインにスタイリングする、クロスブラウザ対応のスタイルシートをCss Finestから紹介します。
6 ways of styling a search form with css
demo
Cssfinest - style 1
HTML
|
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> <form id=”searchform1″ method=”get” action=”" > <input class=”isearch1″ type=”text” name=”keywords” id=”keywords” /> <input class=”ibutton1″ type=”submit” value=”" /> </form> </textarea> |
CSS
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> /* 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; } </textarea> |
Cssfinest - style 2
HTML
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <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> </textarea> |
CSS
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="css" cols="60" rows="5"> /*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; } </textarea> |
Cssfinest - style 3
HTML
|
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> <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> </textarea> |
CSS
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> /*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;} </textarea> |
Cssfinest - style 4
HTML
|
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> <form id=”searchform4″ method=”get” action=”" > <input class=”isearch4″ type=”text” name=”keywords” id=”keywords” /> <input class=”ibutton4″ type=”submit” value=”" /> </form> </textarea> |
CSS
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> /*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; } </textarea> |
Cssfinest -style 5
HTML
|
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> <form id=”searchform5″ method=”get” action=”" > <input class=”isearch5″ type=”text” name=”keywords” id=”keywords” /> <input class=”ibutton5″ type=”submit” value=”" /> </form> </textarea> |
CSS
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> /*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; } </textarea> |
Cssfinest - style 6
HTML
|
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> <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> </textarea> |
CSS
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="css" cols="60" rows="5"> /*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; } </textarea> |
sponsors
