cool searchbox

Posted under » CSS on 6 October 2011

A cool search box is nice. I saw this at wyctim.com and decided to test it out. However, it worked on most browsers except IE.

The CSS will look like this.

#search { float: right; display: inline; position: relative; top: 24px; }
#search label { margin-top: 9px; margin-left: 30px; }
#search input { width: 182px; padding-left: 28px; background: url(/imgs/assets.png) 10px 6px no-repeat; border-radius: 20px; }
#search input:focus { padding-left: 27px; background-position: 9px 5px; }

label.inlined { position: absolute; z-index: 1; color: #666; margin-left: 10px; margin-top: 6px; opacity: 0.75; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear;  -ms-transition: opacity 0.15s linear; -webkit-font-smoothing: antialiased; }
label.focus { opacity: 0.35; }
label.has-text { opacity: 0.0; -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -o-transition-duration: 0s; -ms-transition-duration: 0s; }

input[type="text"], input[type="email"], input[type="url"], textarea { position: relative; padding: 5px 8px; z-index: 2; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #333; background: transparent; border: 1px #ddd solid; box-shadow: inset 0 1px 5px rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.6); border-radius: 3px; -webkit-font-smoothing: antialiased; -webkit-transition: border-color 0.3s ease-out; -moz-transition: border-color 0.3s ease-out; -o-transition: border-color 0.3s ease-out; -ms-transition: border-color 0.3s ease-out; }
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus { padding: 4px 7px; border-width: 2px; border-color: #09f; outline: none; 

You need to have "jquery.js" linked.

The form itself.


Lastly you have to run this at the body, preferably at the bottom.


As I said, this may not work that well in IE, especially the disappearing "search..." text. Therefore, you can take that part out.

web security linux ubuntu GIT svn Raspberry apache mysql php drupal cake symfony javascript Ajax css