Collection
Post cover

Best 17 jQuery Search Boxes

Collection of free jQuery search box code examples from codepen, github and other resources. Animated search boxes to make great website UI.

Animated Search Box

Author: Hamed

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

jQuery Search Box

Author: Short Code

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dropdown Search Box

Author: rajeshdn

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Animated Search Box

Author: Atul Prajapati

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Search Box - Icon to Bar

Author: Sabine Robart

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Expanding circle to show form input. Loading animation on click.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, bootstrap.css, bootstrap.js, aos.js

Animated Search Form with Micro Interactions

Author: Himalaya Singh

Links: demo and code

Made with: HTML / CSS / JS

Applying some micro-interactions on a search form UI.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Search Field Animation

Author: Aaron Iker

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Fancy Search Box

Author: Tommy Small

Links: demo and code

Made with: HTML / CSS / JS

Simple animations using CSS and stroke-dashoffset.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Search Input Animation

Author: Aaron Iker

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Search Input

Author: 0guzhan

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.js

Search Box

Author: rajeshdn

Links: demo and code

Made with: HTML / CSS / JS

Expanding animated search box using jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Animated Search Box

Author: Chouaib Blgn

Links: demo and code

Made with: HTML / CSS / JS

Animated search box using HTML, CSS and jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Animated Search Box

Author: Alex Tkachev

Links: demo and code

Made with: HTML / CSS / JS

Animated search box in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

jQuery Search Slide Out

Author: James Thomas Almond

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

A simple jQuery slide out search box that works with any base font-size.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Apple Menu Search Animation

Author: uros

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Apple website menu search animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, animate.css

Diagonal Menu With Search

Author: _j_

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Search Button Animation

Author: Kristy Yeaton

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback