- Search bar - Auto-size

Save space on your toolbar by collapsing the search bar until needed.

To use this style, install Firefox and Stylish. If you already have Stylish, make sure this site is allowed to run JavaScript.

Search bar - Auto-size
Author banthaz
License CC BY
Created Apr 20, 2012
Updated Apr 22, 2012
Installs (this week) 7
Installs (total) 899
Show CSS


You can customize the collapsed width, expanded width, animation duration and delay before expanding when hovering, by modifying the indicated code.

The “after” screen shot shows the collapsed state. The “before” screen shot shows the expanded state, at the same time as it actually is a “before” screenshot.

Known issues:
* “Expand when … Hovering or focusing”: When switching search engines, moving the mouse pointer outside the menu makes the search bar collapse.
* “Expand when … Focusing only”: When switching search engines, the search bar will collapse, and only the part of the menu directly below the search bar will be clickable; using the arrow keys is recommended.

Version 0.9.2 (Apr 22 2012)
Fixed: The search bar is not collapsed when customizing the toolbar anymore, making it easier to do so.
Changed: The default animation duration is now 150ms, instead of 200ms.
Changed: The default delay before expanding when hovering is now 300ms, instead of 300ms.
Thanks sdrocking!

Version 0.9.1 (Apr 21 2012)
Added: “Transparent borders and background until hovered or focused” option, as suggested by mikedl.

Version 0.9 (Apr 20 2012)
First release.



No discussions posted in the last year. See older discussions. Ask a new question or add a review for this style.