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.
