Pretty textbox jQuery plugin 26 September, 2009

Some time ago I made a pretty search box for our latest project (not yet released) and I thought I’d make it into a jQuery plugin and share it with you. The goal was to have a text input with some default text (search this, or search that) and a pretty magnifying glass image in the right. And when you click (or give focus to) into the input the default text and the image would disappear. This is just an effect we ware going for, you could make something completely different using only CSS and this plugin for the default text disappearing/appearing. The nifty part is that if the user doesn’t enter any text and leaves the input box the default text pops-up again. Best describe this with a image:

pretty text box

Plugin code and demo can be found here. I also played with CSS3 border-radious and box-shadow to make the inputs even more prettier.

update: just realized that the middle label on the image should be “with focus” not “with input”

If you wish to discuss this post please use twitter or contact me.