Hi Guys,
For another website that I launched today I wanted to have really cool CSS based styled Search box.
So I designed one for myself and thought its worthwhile to share.
The final product look like this
If you don’t like the above outcome you can edit the CSS to suit your design.
Below is the code for this search box
[geshi lang=”html5″ nums=”1″ target=”_self” ]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #jcorg_search { background:#EEE; background-image: linear-gradient(bottom, rgb(235,235,235) 30%, rgb(181,181,181) 65%); background-image: -o-linear-gradient(bottom, rgb(235,235,235) 30%, rgb(181,181,181) 65%); background-image: -moz-linear-gradient(bottom, rgb(235,235,235) 30%, rgb(181,181,181) 65%); background-image: -webkit-linear-gradient(bottom, rgb(235,235,235) 30%, rgb(181,181,181) 65%); background-image: -ms-linear-gradient(bottom, rgb(235,235,235) 30%, rgb(181,181,181) 65%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.3, rgb(235,235,235)), color-stop(0.65, rgb(181,181,181)) ); border:1px solid #000; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; padding:7px; width:670px; } #jcorg_search .outer { border:2px solid #666; border-color:#A1A1A1 #DFDFDF #C7C7C7 #DFDFDF; height:61px; padding-left:5px; -moz-border-radius:5px; -webkit-border-radius:5px; position:relative; } #jcorg_search input, #jcorg_search input:focus,#jcorg_search .outer { background:#FFFFFF; background-image: linear-gradient(bottom, rgb(252,252,252) 30%, rgb(242,242,242) 65%); background-image: -o-linear-gradient(bottom, rgb(252,252,252) 30%, rgb(242,242,242) 65%); background-image: -moz-linear-gradient(bottom, rgb(252,252,252) 30%, rgb(242,242,242) 65%); background-image: -webkit-linear-gradient(bottom, rgb(252,252,252) 30%, rgb(242,242,242) 65%); background-image: -ms-linear-gradient(bottom, rgb(252,252,252) 30%, rgb(242,242,242) 65%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.3, rgb(252,252,252)), color-stop(0.65, rgb(242,242,242)) ); } #jcorg_search input, #jcorg_search input:focus { border:none; margin:2px 0; width:522px; padding:9px; color:#666; outline:none; font:bold 32px calibri,Helvetica, Arial, sans-serif; } #jcorg_search input.search_action { float:right; margin-top:1px; width:115px; padding:10px; background:#333; color:#FFF; } |
<!-- [if IE 6]>
<![endif] -->