Search Form with CSS3

Umumnya untuk mempercantik tampilan Search form, kita menggunakan image. Dengan CSS3 ini, kita bisa memepercantik tampilan search form tanpa gambar

Toss your dashed hopes not into a trash bin but into a drawer where you are likely to rummage some bright morning. Robert Brault

Umumnya untuk mempercantik tampilan Search form, kita menggunakan image. Dengan CSS3 ini, kita bisa memepercantik tampilan search form tanpa gambar

Last Modif at November 26th, 2011

Umumnya untuk membuat tampilan search form yang menarik, kita menambahkan background image, ia kan? adapun tampilan standardnya tapi terlihat kurang menarik. Nah, dengan CSS3 kita bisa mempercantik tampilan search form ini, dengan CSS3 ini nantinya kita akan menggambar icon kaca pembesar dan menambahkan efek box-shadow. Untuk preview-nya bisa dilihat dibawah.

CSS3 : Search form

preview



source code : CSS3 Search Form


<style type='text/css'>
/*
* css setting general
* silakan tambahkan css ini kaatas tag </head>
*/
#css3-ifind{
clear:both;
max-width:500px;
min-width:300px;
margin:20px auto;
}
.ifind label{
display:none;
}
.ifind input:focus{
outline:none;
}
.ifind form, .ifind input{
margin:0;
padding:0;
border:none;
background:transparent;
display:block;
}
.ifind{
clear:both;
margin:0 auto;
}
.ifind form{
width:100%;
float:right;
padding:0;
margin:0;
-webkit-border-radius:5px;
border-radius:5px;
-moz-border-radius:5px;
}
.ifind input[type=text]{
width:84%;
float:left;
margin:0 3px 0 0;
font:italic normal 21px arial, helvetica;
padding:8px 4px 9px 4px;
}
.ifind input[type=text]:focus{
background:none;
}
.ifind input[type=submit]{
width:23px;
height:23px;
font-size:0px;
cursor:pointer;
float:right;
margin:5px -7px 0 0;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
}
.ifind input[type=reset]{
cursor:none;
padding:0;
float:right;
width:15px;
height:6px;
font-size:0px;
margin:26px 7px 0 0;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
border-radius:0 2px 2px 0px;
-moz-border-radius:0 2px 2px 0px;
-webkit-border-radius:0 2px 2px 0px;
}
/* end css setting general*/
/* css setting color */
#css3-ifind .ifind form{
background:#ffffff;
border-bottom:1px solid #ccc;
}
#css3-ifind .ifind input[type=text]{
color:#aaa;
}
#css3-ifind .ifind input[type=text]:focus{
color:#888!important;
}
#css3-ifind .ifind input[type=submit]{
color:#ccc;
border:2px solid #cccccc;
background:#ffffff;
}
#css3-ifind .ifind input[type=submit]:hover{
background:#ccc;
}
#css3-ifind .ifind input[type=reset]{
background:#cccccc;
color:#ffffff;
}
/* end css setting color */
</style>
<div style='/*ini adalah markup html-nya. silakan tambahkan dibawah tag <body> atau elemen lain*/' id='css3-ifind'>
<div class='ifind'>
<form method='get' action=''>
<div><label>find</label>
<input class='text' name='s' onfocus='if (this.value == "search here . . .") {this.value = "";}' onblur='if (this.value == "") {this.value = "search here . . .";}' value='search here . . .' type='text'/>
<input class='reset' type='reset'/><input class="submit" value="Go" type="submit"/></div>
</form>
</div><!-- .ifind -->
</div><!-- #css3-ifind -->

CSS3 : Search form silver

preview



source code : CSS3 Search Form silver


<style type='text/css'>
/*
* css setting general
* silakan tambahkan css ini kaatas tag </head>
*/
#css3-ifind-silver{
clear:both;
max-width:500px;
min-width:300px;
margin:20px auto;
}
.ifind label{
display:none;
}
.ifind input:focus{
outline:none;
}
.ifind form, .ifind input{
margin:0;
padding:0;
border:none;
background:transparent;
display:block;
}
.ifind{
clear:both;
margin:0 auto;
}
.ifind form{
width:100%;
float:right;
padding:0;
margin:0;
-webkit-border-radius:5px;
border-radius:5px;
-moz-border-radius:5px;
}
.ifind input[type=text]{
width:84%;
float:left;
margin:0 3px 0 0;
font:italic normal 21px arial, helvetica;
padding:8px 4px 9px 4px;
}
.ifind input[type=text]:focus{
background:none;
}
.ifind input[type=submit]{
width:23px;
height:23px;
font-size:0px;
cursor:pointer;
float:right;
margin:5px -7px 0 0;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
}
.ifind input[type=reset]{
cursor:none;
padding:0;
float:right;
width:15px;
height:6px;
font-size:0px;
margin:26px 7px 0 0;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
border-radius:0 2px 2px 0px;
-moz-border-radius:0 2px 2px 0px;
-webkit-border-radius:0 2px 2px 0px;
}
/* end css setting general*/
/* css setting color */
#css3-ifind-silver .ifind form{
background:#ffffff;
box-shadow:
inset 1px -1px 2px #aaaaaa,
inset -1px 1px 2px #777777;
-moz-box-shadow:
inset 1px -1px 2px #aaaaaa,
inset -1px 1px 2px #777777;
-webkit-box-shadow:
inset 1px -1px 2px #aaaaaa,
inset -1px 1px 2px #aaaaaa
;
}
#css3-ifind-silver .ifind input[type=text]{
border-right:2px solid #cccccc;
color:#cccccc;
}
#css3-ifind-silver .ifind input[type=text]:focus{
color:#888888!important;
}
#css3-ifind-silver .ifind input[type=submit]{
color:#ccc;
border:2px solid #cccccc;
background:#ffffff;
}
#css3-ifind-silver .ifind input[type=submit]:hover{
background:#eee;
}
#css3-ifind-silver .ifind input[type=reset]{
background:#cccccc;
color:#ffffff;
}
/* end css setting color */
</style>
<div style='/*ini adalah markup html-nya. silakan tambahkan dibawah tag <body> atau elemen lain*/' id='css3-ifind-silver'>
<div class='ifind'>
<form method='get' action=''>
<div><label>find</label>
<input class='text' name='s' onfocus='if (this.value == "search here . . .") {this.value = "";}' onblur='if (this.value == "") {this.value = "search here . . .";}' value='search here . . .' type='text'/>
<input class='reset' type='reset'/><input class="submit" value="Go" type="submit"/></div>
</form>
</div><!-- .ifind -->
</div><!-- #css3-ifind -->

CSS3 : Search form blue

preview



source code : CSS3 Search Form blue


<style type='text/css'>
/*
* css setting general
* silakan tambahkan css ini kaatas tag </head>
*/
#css3-ifind-blue{
clear:both;
max-width:500px;
min-width:300px;
margin:20px auto;
}
.ifind label{
display:none;
}
.ifind input:focus{
outline:none;
}
.ifind form, .ifind input{
margin:0;
padding:0;
border:none;
background:transparent;
display:block;
}
.ifind{
clear:both;
margin:0 auto;
}
.ifind form{
width:100%;
float:right;
padding:0;
margin:0;
-webkit-border-radius:5px;
border-radius:5px;
-moz-border-radius:5px;
}
.ifind input[type=text]{
width:84%;
float:left;
margin:0 3px 0 0;
font:italic normal 21px arial, helvetica;
padding:8px 4px 9px 4px;
}
.ifind input[type=text]:focus{
background:none;
}
.ifind input[type=submit]{
width:23px;
height:23px;
font-size:0px;
cursor:pointer;
float:right;
margin:5px -7px 0 0;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
}
.ifind input[type=reset]{
cursor:none;
padding:0;
float:right;
width:15px;
height:6px;
font-size:0px;
margin:26px 7px 0 0;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
border-radius:0 2px 2px 0px;
-moz-border-radius:0 2px 2px 0px;
-webkit-border-radius:0 2px 2px 0px;
}
/* end css setting general*/
/* css setting color */
#css3-ifind-blue .ifind form{
background:#ffffff;
box-shadow:
inset 1px -1px 2px #1F31FF,
inset -1px 1px 2px #1D2EEF;
-moz-box-shadow:
inset 1px -1px 2px #1F31FF,
inset -1px 1px 2px #1D2EEF;
-webkit-box-shadow:
inset 1px -1px 2px #1F31FF,
inset -1px 1px 2px #1F31FF
;
}
#css3-ifind-blue .ifind input[type=text]{
border-right:2px solid #7781EF;
color:#7781EF;
}
#css3-ifind-blue .ifind input[type=text]:focus{
color:#0015FF!important;
}
#css3-ifind-blue .ifind input[type=submit]{
color:#9FA7FF;
border:2px solid #7781EF;
background:#ffffff;
}
#css3-ifind-blue .ifind input[type=submit]:hover{
background:#1F31FF;
}
#css3-ifind-blue .ifind input[type=reset]{
background:#7781EF;
color:#ffffff;
}
/* end css setting color */
</style>
<div style='/*ini adalah markup html-nya. silakan tambahkan dibawah tag <body> atau elemen lain*/' id='css3-ifind-blue'>
<div class='ifind'>
<form method='get' action=''>
<div><label>find</label>
<input class='text' name='s' onfocus='if (this.value == "search here . . .") {this.value = "";}' onblur='if (this.value == "") {this.value = "search here . . .";}' value='search here . . .' type='text'/>
<input class='reset' type='reset'/><input class="submit" value="Go" type="submit"/></div>
</form>
</div><!-- .ifind -->
</div><!-- #css3-ifind -->

CSS3 : Search form red

preview



source code : CSS3 Search Form red


<style type='text/css'>
/*
* css setting general
* silakan tambahkan css ini kaatas tag </head>
*/
#css3-ifind-red{
clear:both;
max-width:500px;
min-width:300px;
margin:20px auto;
}
.ifind label{
display:none;
}
.ifind input:focus{
outline:none;
}
.ifind form, .ifind input{
margin:0;
padding:0;
border:none;
background:transparent;
display:block;
}
.ifind{
clear:both;
margin:0 auto;
}
.ifind form{
width:100%;
float:right;
padding:0;
margin:0;
-webkit-border-radius:5px;
border-radius:5px;
-moz-border-radius:5px;
}
.ifind input[type=text]{
width:84%;
float:left;
margin:0 3px 0 0;
font:italic normal 21px arial, helvetica;
padding:8px 4px 9px 4px;
}
.ifind input[type=text]:focus{
background:none;
}
.ifind input[type=submit]{
width:23px;
height:23px;
font-size:0px;
cursor:pointer;
float:right;
margin:5px -7px 0 0;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
}
.ifind input[type=reset]{
cursor:none;
padding:0;
float:right;
width:15px;
height:6px;
font-size:0px;
margin:26px 7px 0 0;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
border-radius:0 2px 2px 0px;
-moz-border-radius:0 2px 2px 0px;
-webkit-border-radius:0 2px 2px 0px;
}
/* end css setting general*/
/* css setting color */
#css3-ifind-red .ifind form{
background:#ffffff;
box-shadow:
inset 1px -1px 2px #F75656,
inset -1px 1px 2px #F75656;
-moz-box-shadow:
inset 1px -1px 2px #F75656,
inset -1px 1px 2px #F75656;
-webkit-box-shadow:
inset 1px -1px 2px #F75656,
inset -1px 1px 2px #F75656
;
}
#css3-ifind-red .ifind input[type=text]{
border-right:2px solid #F75656;
color:#EF0E0E;
}
#css3-ifind-red .ifind input[type=text]:focus{
color:#8F0808!important;
}
#css3-ifind-red .ifind input[type=submit]{
color:#FF4F4F;
border:2px solid #EF0E0E;
background:#ffffff;
}
#css3-ifind-red .ifind input[type=submit]:hover{
background:#F75656;
}
#css3-ifind-red .ifind input[type=reset]{
background:#EF0E0E;
color:#ffffff;

}
/* end css setting color */
</style>
<div style='/*ini adalah markup html-nya. silakan tambahkan dibawah tag <body> atau elemen lain*/' id='css3-ifind-red'>
<div class='ifind'>
<form method='get' action=''>
<div><label>find</label>
<input class='text' name='s' onfocus='if (this.value == "search here . . .") {this.value = "";}' onblur='if (this.value == "") {this.value = "search here . . .";}' value='search here . . .' type='text'/>
<input class='reset' type='reset'/><input class="submit" value="Go" type="submit"/></div>
</form>
</div><!-- .ifind -->
</div><!-- #css3-ifind -->

CSS3 : Search form green

preview



source code : CSS3 Search Form green


<style type='text/css'>
/*
* css setting general
* silakan tambahkan css ini kaatas tag </head>
*/
#css3-ifind-green{
clear:both;
max-width:500px;
min-width:300px;
margin:20px auto;
}
.ifind label{
display:none;
}
.ifind input:focus{
outline:none;
}
.ifind form, .ifind input{
margin:0;
padding:0;
border:none;
background:transparent;
display:block;
}
.ifind{
clear:both;
margin:0 auto;
}
.ifind form{
width:100%;
float:right;
padding:0;
margin:0;
-webkit-border-radius:5px;
border-radius:5px;
-moz-border-radius:5px;
}
.ifind input[type=text]{
width:84%;
float:left;
margin:0 3px 0 0;
font:italic normal 21px arial, helvetica;
padding:8px 4px 9px 4px;
}
.ifind input[type=text]:focus{
background:none;
}
.ifind input[type=submit]{
width:23px;
height:23px;
font-size:0px;
cursor:pointer;
float:right;
margin:5px -7px 0 0;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
}
.ifind input[type=reset]{
cursor:none;
padding:0;
float:right;
width:15px;
height:6px;
font-size:0px;
margin:26px 7px 0 0;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
border-radius:0 2px 2px 0px;
-moz-border-radius:0 2px 2px 0px;
-webkit-border-radius:0 2px 2px 0px;
}
/* end css setting general*/
/* css setting color */
#css3-ifind-green .ifind form{
background:#ffffff;
box-shadow:
inset 1px -1px 2px #70EF8A,
inset -1px 1px 2px #3CD85B;
-moz-box-shadow:
inset 1px -1px 2px #70EF8A,
inset -1px 1px 2px #3CD85B;
-webkit-box-shadow:
inset 1px -1px 2px #70EF8A,
inset -1px 1px 2px #3CD85B
;
}
#css3-ifind-green .ifind input[type=text]{
border-right:2px solid #00DF09;
color:#00DF09;
}
#css3-ifind-green .ifind input[type=text]:focus{
color:#001F01!important;
}
#css3-ifind-green .ifind input[type=submit]{
color:#0FFF19;
border:2px solid #00DF09;
background:#ffffff;
}
#css3-ifind-green .ifind input[type=submit]:hover{
background:#3CD85B;
}
#css3-ifind-green .ifind input[type=reset]{
background:#00DF09;
color:#ffffff;
}
/* end css setting color */
</style>
<div style='/*ini adalah markup html-nya. silakan tambahkan dibawah tag <body> atau elemen lain*/' id='css3-ifind-green'>
<div class='ifind'>
<form method='get' action=''>
<div><label>find</label>
<input class='text' name='s' onfocus='if (this.value == "search here . . .") {this.value = "";}' onblur='if (this.value == "") {this.value = "search here . . .";}' value='search here . . .' type='text'/>
<input class='reset' type='reset'/><input class="submit" value="Go" type="submit"/></div>
</form>
</div><!-- .ifind -->
</div><!-- #css3-ifind -->

CSS3 : Search form dark

preview



source code : CSS3 Search Form dark


<style type='text/css'>
/*
* css setting general
* silakan tambahkan css ini kaatas tag </head>
*/
#css3-ifind-dark{
clear:both;
max-width:500px;
min-width:300px;
margin:20px auto;
}
.ifind label{
display:none;
}
.ifind input:focus{
outline:none;
}
.ifind form, .ifind input{
margin:0;
padding:0;
border:none;
background:transparent;
display:block;
}
.ifind{
clear:both;
margin:0 auto;
}
.ifind form{
width:100%;
float:right;
padding:0;
margin:0;
-webkit-border-radius:5px;
border-radius:5px;
-moz-border-radius:5px;
}
.ifind input[type=text]{
width:84%;
float:left;
margin:0 3px 0 0;
font:italic normal 21px arial, helvetica;
padding:8px 4px 9px 4px;
}
.ifind input[type=text]:focus{
background:none;
}
.ifind input[type=submit]{
width:23px;
height:23px;
font-size:0px;
cursor:pointer;
float:right;
margin:5px -7px 0 0;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
}
.ifind input[type=reset]{
cursor:none;
padding:0;
float:right;
width:15px;
height:6px;
font-size:0px;
margin:26px 7px 0 0;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
border-radius:0 2px 2px 0px;
-moz-border-radius:0 2px 2px 0px;
-webkit-border-radius:0 2px 2px 0px;
}
/* end css setting general*/
/* css setting color */
#css3-ifind-dark .ifind form{
background:#333;
box-shadow:
inset 1px -1px 2px #BFBFBF,
inset -1px 1px 2px #CBCBCB;
-moz-box-shadow:
inset 1px -1px 2px #BFBFBF,
inset -1px 1px 2px #CBCBCB;
-webkit-box-shadow:
inset 1px -1px 2px #BFBFBF,
inset -1px 1px 2px #BFBFBF
;
}
#css3-ifind-dark .ifind input[type=text]{
border-right:2px solid #8f8f8f;
color:#8f8f8f;
}
#css3-ifind-dark .ifind input[type=text]:focus{
color:#C7C7C7!important;
}
#css3-ifind-dark .ifind input[type=submit]{
color:#858585;
border:2px solid #8f8f8f;
background:#333;
}
#css3-ifind-dark .ifind input[type=submit]:hover{
background:#888;
}
#css3-ifind-dark .ifind input[type=reset]{
background:#8f8f8f;
color:#111111;
}
/* end css setting color */
</style>
<div style='/*ini adalah markup html-nya. silakan tambahkan dibawah tag <body> atau elemen lain*/' id='css3-ifind-dark'>
<div class='ifind'>
<form method='get' action=''>
<div><label>find</label>
<input class='text' name='s' onfocus='if (this.value == "search here . . .") {this.value = "";}' onblur='if (this.value == "") {this.value = "search here . . .";}' value='search here . . .' type='text'/>
<input class='reset' type='reset'/><input class="submit" value="Go" type="submit"/></div>
</form>
</div><!-- .ifind -->
</div><!-- #css3-ifind -->

Cara pemasangan

silakan copy code diatas, lalu sesuaikan css dan tag html-nya.
style css-nya diletakan diatas </head>
dan markup htmlnya diletakan dibawah tag <body> atau sesuaikan di element lain.

Untuk wordpress

Agar search form-nya bekerja dengan baik di wordpress, sesuaikan codenya dengan ini

<form action='<?php echo home_url(); ?>/' method='get'>
<input type='text' name='s'/>

perhatikan value atribut action pada form adalah <?php echo home_url(); ?>/ outputnya halaman utama blog sobat, sedangkan value atribut method adalah 'get'.
dan value atribut name pada input[type='text'] adalah 's'

Untuk blogspot

Agar search form-nya bekerja dengan baik di blogspot, sesuaikan codenya dengan ini

<form action='http://nama-blog.blogspot.com/search' method='get'>
<input type='text' name='s'/>

value action-nya adalah http://nama-blog.blogspot/search

HTML code CSS search form

untuk belajar dan ngedit, silakan copy code berikut lalu save as dengan format *html


<html>
<head>
<title>CSS3 : Ifind-Search Form</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<meta http-equiv="refresh" content="120;url=http://www.indaam.net"/>
<style type='text/css'>
/* css setting general*/
.ifind label{
display:none;
}
.ifind input:focus{
outline:none;
}
.ifind form, .ifind input{
margin:0;
padding:0;
border:none;
background:transparent;
display:block;
}
.ifind{
clear:both;
margin:0 auto;
}
.ifind form{
width:100%;
float:right;
padding:0;
margin:0;
-webkit-border-radius:5px;
border-radius:5px;
-moz-border-radius:5px;
}
.ifind input[type=text]{
width:84%;
float:left;
margin:0 3px 0 0;
font:italic normal 21px arial, helvetica;
padding:8px 4px 9px 4px;
}
.ifind input[type=text]:focus{
background:none;
}
.ifind input[type=submit]{
width:23px;
height:23px;
font-size:0px;
cursor:pointer;
float:right;
margin:5px -7px 0 0;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
}
.ifind input[type=reset]{
cursor:none;
padding:0;
float:right;
width:15px;
height:6px;
font-size:0px;
margin:26px 7px 0 0;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
border-radius:0 2px 2px 0px;
-moz-border-radius:0 2px 2px 0px;
-webkit-border-radius:0 2px 2px 0px;
}
#css3-ifind,
#css3-ifind-dark,
#css3-ifind-green,
#css3-ifind-blue,
#css3-ifind-red,
#css3-ifind-silver{
clear:both;
max-width:500px;
min-width:300px;
margin:20px auto;
}
/* end css setting general*/
/* css setting color */
/* set standart color */
#css3-ifind .ifind form{
background:#ffffff;
border-bottom:1px solid #ccc;
}
#css3-ifind .ifind input[type=text]{
color:#aaa;
}
#css3-ifind .ifind input[type=text]:focus{
color:#888!important;
}
#css3-ifind .ifind input[type=submit]{
color:#ccc;
border:2px solid #cccccc;
background:#ffffff;
}
#css3-ifind .ifind input[type=submit]:hover{
background:#ccc;
}
#css3-ifind .ifind input[type=reset]{
background:#cccccc;
color:#ffffff;
}
/* end standart color */
/* set silver color */
#css3-ifind-silver .ifind form{
background:#ffffff;
box-shadow:
inset 1px -1px 2px #aaaaaa,
inset -1px 1px 2px #777777;
-moz-box-shadow:
inset 1px -1px 2px #aaaaaa,
inset -1px 1px 2px #777777;
-webkit-box-shadow:
inset 1px -1px 2px #aaaaaa,
inset -1px 1px 2px #aaaaaa;
}
#css3-ifind-silver .ifind input[type=text]{
border-right:2px solid #cccccc;
color:#cccccc;
}
#css3-ifind-silver .ifind input[type=text]:focus{
color:#888888!important;
}
#css3-ifind-silver .ifind input[type=submit]{
color:#ccc;
border:2px solid #cccccc;
background:#ffffff;
}
#css3-ifind-silver .ifind input[type=submit]:hover{
background:#eee;
}
#css3-ifind-silver .ifind input[type=reset]{
background:#cccccc;
color:#ffffff;
}
/* end silver color */
/* set color red */
#css3-ifind-red .ifind form{
background:#ffffff;
box-shadow:
inset 1px -1px 2px #F75656,
inset -1px 1px 2px #F75656;
-moz-box-shadow:
inset 1px -1px 2px #F75656,
inset -1px 1px 2px #F75656;
-webkit-box-shadow:
inset 1px -1px 2px #F75656,
inset -1px 1px 2px #F75656
;
}
#css3-ifind-red .ifind input[type=text]{
border-right:2px solid #F75656;
color:#EF0E0E;
}
#css3-ifind-red .ifind input[type=text]:focus{
color:#8F0808!important;
}
#css3-ifind-red .ifind input[type=submit]{
color:#FF4F4F;
border:2px solid #EF0E0E;
background:#ffffff;
}
#css3-ifind-red .ifind input[type=submit]:hover{
background:#F75656;
}
#css3-ifind-red .ifind input[type=reset]{
background:#EF0E0E;
color:#ffffff;
}
/* end color red*/
/* set color green */
#css3-ifind-green .ifind form{
background:#ffffff;
box-shadow:
inset 1px -1px 2px #70EF8A,
inset -1px 1px 2px #3CD85B;
-moz-box-shadow:
inset 1px -1px 2px #70EF8A,
inset -1px 1px 2px #3CD85B;
-webkit-box-shadow:
inset 1px -1px 2px #70EF8A,
inset -1px 1px 2px #3CD85B
;
}
#css3-ifind-green .ifind input[type=text]{
border-right:2px solid #00DF09;
color:#00DF09;
}
#css3-ifind-green .ifind input[type=text]:focus{
color:#001F01!important;
}
#css3-ifind-green .ifind input[type=submit]{
color:#0FFF19;
border:2px solid #00DF09;
background:#ffffff;
}
#css3-ifind-green .ifind input[type=submit]:hover{
background:#3CD85B;
}
#css3-ifind-green .ifind input[type=reset]{
background:#00DF09;
color:#ffffff;
}
/* end color green*/
/* set color dark */
#css3-ifind-dark .ifind form{
background:#333;
box-shadow:
inset 1px -1px 2px #BFBFBF,
inset -1px 1px 2px #CBCBCB;
-moz-box-shadow:
inset 1px -1px 2px #BFBFBF,
inset -1px 1px 2px #CBCBCB;
-webkit-box-shadow:
inset 1px -1px 2px #BFBFBF,
inset -1px 1px 2px #BFBFBF
;
}
#css3-ifind-dark .ifind input[type=text]{
border-right:2px solid #8f8f8f;
color:#8f8f8f;
}
#css3-ifind-dark .ifind input[type=text]:focus{
color:#C7C7C7!important;
}
#css3-ifind-dark .ifind input[type=submit]{
color:#858585;
border:2px solid #8f8f8f;
background:#333;
}
#css3-ifind-dark .ifind input[type=submit]:hover{
background:#888;
}
#css3-ifind-dark .ifind input[type=reset]{
background:#8f8f8f;
color:#111111;
}
/* end color dark */
/* set color blue */
#css3-ifind-blue .ifind form{
background:#ffffff;
box-shadow:
inset 1px -1px 2px #1F31FF,
inset -1px 1px 2px #1D2EEF;
-moz-box-shadow:
inset 1px -1px 2px #1F31FF,
inset -1px 1px 2px #1D2EEF;
-webkit-box-shadow:
inset 1px -1px 2px #1F31FF,
inset -1px 1px 2px #1F31FF;
}
#css3-ifind-blue .ifind input[type=text]{
border-right:2px solid #7781EF;
color:#7781EF;
}
#css3-ifind-blue .ifind input[type=text]:focus{
color:#0015FF!important;
}
#css3-ifind-blue .ifind input[type=submit]{
color:#9FA7FF;
border:2px solid #7781EF;
background:#ffffff;
}
#css3-ifind-blue .ifind input[type=submit]:hover{
background:#1F31FF;
}
#css3-ifind-blue .ifind input[type=reset]{
background:#7781EF;
color:#ffffff;
}
/* end color blue */
/* end css setting color */
/* end css */
</style>
</head>
<body>
<div id='css3-ifind'>
<div class='ifind'>
<form method='get' action=''>
<div><label>find</label>
<input class='text' name='s' onfocus='if (this.value == "search here . . .") {this.value = "";}' onblur='if (this.value == "") {this.value = "search here . . .";}' value='search here . . .' type='text'/>
<input class='reset' type='reset'/><input class="submit" value="Go" type="submit"/></div>
</form>
</div><!-- .ifind -->
</div><!-- #css3-ifind -->
<div style='clear:both'></div>
<div id='css3-ifind-silver'>
<div class='ifind'>
<form method='get' action=''>
<div><label>find</label>
<input class='text' name='s' onfocus='if (this.value == "search here . . .") {this.value = "";}' onblur='if (this.value == "") {this.value = "search here . . .";}' value='search here . . .' type='text'/>
<input class='reset' type='reset'/><input class="submit" value="Go" type="submit"/></div>
</form>
</div><!-- .ifind -->
</div><!-- #css3-ifind-silver -->
<div style='clear:both'></div>
<div id='css3-ifind-red'>
<div class='ifind'>
<form method='get' action=''>
<div><label>find</label>
<input class='text' name='s' onfocus='if (this.value == "search here . . .") {this.value = "";}' onblur='if (this.value == "") {this.value = "search here . . .";}' value='search here . . .' type='text'/>
<input class='reset' type='reset'/><input class="submit" value="Go" type="submit"/></div>
</form>
</div><!-- .ifind -->
</div><!-- #css3-ifind-red -->
<div style='clear:both'></div>
<div id='css3-ifind-blue'>
<div class='ifind'>
<form method='get' action=''>
<div><label>find</label>
<input class='text' name='s' onfocus='if (this.value == "search here . . .") {this.value = "";}' onblur='if (this.value == "") {this.value = "search here . . .";}' value='search here . . .' type='text'/>
<input class='reset' type='reset'/><input class="submit" value="Go" type="submit"/></div>
</form>
</div><!-- .ifind -->
</div><!-- #css3-ifind-blue -->
<div style='clear:both'></div>
<div id='css3-ifind-green'>
<div class='ifind'>
<form method='get' action=''>
<div><label>find</label>
<input class='text' name='s' onfocus='if (this.value == "search here . . .") {this.value = "";}' onblur='if (this.value == "") {this.value = "search here . . .";}' value='search here . . .' type='text'/>
<input class='reset' type='reset'/><input class="submit" value="Go" type="submit"/></div>
</form>
</div><!-- .ifind -->
</div><!-- #css3-ifind-green -->
<div style='clear:both'></div>
<div id='css3-ifind-dark'>
<div class='ifind'>
<form method='get' action=''>
<div><label>find</label>
<input class='text' name='s' onfocus='if (this.value == "search here . . .") {this.value = "";}' onblur='if (this.value == "") {this.value = "search here . . .";}' value='search here . . .' type='text'/>
<input class='reset' type='reset'/><input class="submit" value="Go" type="submit"/></div>
</form>
</div><!-- .ifind -->
</div><!-- #css3-ifind-dark -->
<span style="position: fixed; bottom: 3%; right: 3%; font: italic bold 120% "comic sans ms";">Original Source Code by <a style="text-decoration: none; color: red;" href="http://www.indaam.net" target="blank" title="Indam Site">Indam Site</a></span>
<!-- regards
http://www.indaam.net -->
</body>
</html>

Kelebihan dan kekurangan

Kelebihan dari teknik ini ialah tampilanya tetap sama walaupun load image di-disable, kekuranganya ialah tampil buruk di MSIE.
semoga bermanfaat

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

13 thoughts on “Search Form with CSS3”

  1. Rudy Azhar says:

    Kereen… Tanpa menggunakan gambar sama sekali ya Bro?

  2. indam says:

    Ia bro, tanpa gambar. Sayangnya tampil buruk di IE

  3. gimana soal kesesuaian sama browser selain IE mas?

  4. hasbi says:

    bos aye pengen nanya cara buat sub page yg kayak ente diatas “categories” kan ada sub-nya tuh seperti alexa rank, keamanan, mobile lainnya.. gimana tuh caranya?? thanks ya sebelumnya.. maklum newbi.. aye tunggu jawabannya ye.. 1X thanks…

  5. heru says:

    thank gan…..sudah tak coba ….sambil belajar….

  6. Zippy says:

    Wihiiii…dapet ilmu lagi nih disini :D
    Keren..keren :D
    Ntar deh kapan2 saya coba, untuk sementara ngga dulu :D
    Lagi males utak atik blog.
    Bukannya males sih, tapi karena takut error, wkwkwkw… :lol:

  7. Zippy says:

    Lha, komentar saya kemana ya?
    Haduh..kejerat om Akismet ya? :D
    Intinya sih bagus, hanya saja buat saya nanti dulu deh.
    Belum ada waktu buat utak atiknya :D
    Btw, thx buat infonya :)

  8. putra says:

    kog ga ada yang nge ralat ya, itu yang terakhir tentang kelebihan dan kekuTangan, harusnya kekuRangan ya om :D

  9. Rouen says:

    Info gan, untuk blog ku (blogspot) biar search form nya work codenya gini

    aku soalnya pake ga bisa jalan, cuma balik ke home

    1. indam says:

      Coba dibaca baik-baik gan…

  10. Heather says:

    I personally Think article, “Search Form with CSS3 || Indam Site” was indeed perfect!
    Icouldn’t agree with u more! Finally seems like I personallycame across a web-site definitely worth browsing. Thanks for the post, Mohammed

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-