Actually, this specific searchform is to be found in nearly every Apple software-product. Also in the Safari browser. And since this rounded and functional searchform integrates nicely with a website, I wanted it to display and behave this way in every browser.
The Apple searchforms feature:
- realtime ‘on-type’-search on your music
- a small magnfying glass to select where to search
- a small button to clear the search field when something is typed into it.
- a dropdown menu to select search options (disregarded in this project)
Here is a quick screenshot of how the searchform looks in iTunes. Well, it has a white background insted of a ‘digital-green’ but the background of the iTunes title-display has that color. So I combined them into this:
I did a quick thought on how I could realise this functionality to use it for the searchform on my site and still keep it an accessible searchform.
The solution is close: It can easily be done using JavaScript and CSS to style it like Apple-Candy. For now I didn’t implement the option dropdown but this is also easy to realise by using e.g. an unsorted list.
Quick ‘n Dirty
You can see the implemented searchform in my sidebar.
Meanwhile, I’ve switched my WordPress theme and discarded the example searchform. But I’m currently working on a new implementation as JavaScript Object Notation. It’s already live for testing purposes. New graphics are also in progress.
Go for the code:
References & Annotations
Documentations and things I discovered during research and development
- To make the border of an
inputinvisible you have to setborder-style: hidden(nonedoesn’t work).
Known Bugs
- Button background images still don’t work properly in Opera
Reset button doesn’t hide on form reset
Feel free to post a comment if you like (or do not like) the new search. I would also appreciate the reporting of further bugs/fixes and suggestions for improvement. Experts to the front!
TweetPosted in Design, Developing, Tags:Apple, css, html, searchform
Possibly Related Entries
7 Responses to “A searchform like in iTunes”
Who is this?
freshlabs journal is the bi-lingual weblog and digital playground of Tim Isenheim, designer and webdeveloper from Hamburg, Germany. More →
It’s wonderful.,and can you give the image samples used in this ?
Sure. I added a paragraph Images I used in the article.
Glad you like it. :)
Thanks a lot ,I would change it green to fit my page:)
hi,I open your page under IE6.0/windows,and the search form background shows a bit of the second form top.Have you check that condition?
Yes, I am aware of that issue. It’s based in the input-fields’
line-heightandpadding.I’m working on it.It’s fixed.This is amazing! Keep up with the good work =)
Wow that is really impressive, great work, I hope maybe one day you’ll be able to produce it as a plugin or something! Great anyway thanks!