Mengubah Desain Search Box

Setelah jalan-jalan ke blognya Annie, saya menemukan sebuah hack yang menarik perhatian saya. Seperti yang terlihat dari judulnya, hack kali ini bertujuan mengubah desain Search Box. Dari yang tadinya biasa saja seperti ini :





menjadi seperti ini :





Terlihat jauh lebih baik kan..? At least, ga kotak-kotak lagi :)

Caranya gampang banget. Tinggal tambahin kode-kode di bawah ini ke dalam kode CSS kamu.

@-moz-document url-prefix(http) {
/* change the buttons*/
input[type="reset"], input[type="submit"], button
{
-moz-border-radius: 0.5em !important;
border: 1px solid #CCC !important;
border-bottom: 1px solid #CCC !important;
background-color: #EEE !important;
color: #555555 !important;
}
input, textarea
{
-moz-border-radius: 0.8em !important;
}
input, textarea,select
{
background-color: #FFF !important;
border-top: 1px solid #C3C3C3 !important;
border-right: 1px solid #C3C3C3 !important;
border-bottom: 1px solid #C3C3C3 !important;
border-left: 1px solid #C3C3C3 !important;
color: #555555 !important;
}
/*change them on focus with a blue border*/
input:not([type="button"]):not([type="reset"])
:not([type="submit"]):not([type="checkbox"])
:focus,textarea:focus
{
-moz-outline-radius: 0.8em !important;
}
input:not([type="button"]):not([type="reset"])
:not([type="submit"]):not([type="checkbox"])
:focus, textarea:focus, select:focus
{
-moz-outline: 2px solid #ccc !important;
-moz-outline-offset: -1px !important;
}
/*rollover effect on the buttons*/
input[type="submit"]:hover,input[type="reset"]
:hover,button:hover {
border-color: #E8E9E8 !important;
border-bottom-color:#E8E9E8 !important;
background-color: #FCFCFC !important;
}
}

Kalau kamu mau yang lebih beda lagi, kamu bisa ubah-ubah sesuai selera kamu. Feel free and be creative.