Collection of free jQuery search box code examples from Codepen, Github and other resources. Update of March 2021 collection. 2 new items.

Related Articles:

  1. CSS Search Boxes
  2. Bootstrap Search Boxes
  3. Tailwind Search Bars

Author

  • Hamed

Made with

  • HTML / CSS / JS

About a code

Animated Search Box

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

Responsive: no

Dependencies: -

Author

  • Short Code

Made with

  • HTML / CSS / JS

About a code

jQuery Search Box

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

Responsive: no

Dependencies: -

Author

  • rajeshdn

Made with

  • HTML / CSS / JS

About a code

Dropdown Search Box

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Atul Prajapati

Made with

  • HTML / CSS / JS

About a code

Animated Search Box

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

Responsive: no

Dependencies: -

Author

  • Sabine Robart

Made with

  • HTML / CSS (SCSS) / JS

About a code

Search Box - Icon to Bar

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

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

Responsive: no

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

Author

  • Himalaya Singh

Made with

  • HTML / CSS / JS

About a code

Animated Search Form with Micro Interactions

Applying some micro-interactions on a search form UI.

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Search Field Animation

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

Responsive: no

Dependencies: -

Author

  • Tommy Small

Made with

  • HTML / CSS / JS

About a code

Fancy Search Box

Simple animations using CSS and stroke-dashoffset.

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Search Input Animation

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

Responsive: no

Dependencies: -

Author

  • 0guzhan

Made with

  • HTML / CSS / JS

About a code

Search Input

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

Responsive: no

Dependencies: font-awesome.js

Author

  • rajeshdn

Made with

  • HTML / CSS / JS

About a code

Search Box

Expanding animated search box using jQuery.

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Chouaib Blgn

Made with

  • HTML / CSS / JS

About a code

Animated Search Box

Animated search box using HTML, CSS and jQuery.

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Alex Tkachev

Made with

  • HTML / CSS / JS

About a code

Animated Search Box

Animated search box in jQuery.

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

Responsive: no

Dependencies: -

Author

  • James Thomas Almond

Made with

  • HTML / CSS (SCSS) / JS

About a code

jQuery Search Slide Out

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

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

Responsive: no

Dependencies: -

Author

  • uros

Made with

  • HTML / CSS (SCSS) / JS

About a code

Apple Menu Search Animation

Apple website menu search animation.

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

Responsive: no

Dependencies: font-awesome.css, animate.css

Author

  • Riccardo Zanutta

Made with

  • HTML / CSS (SCSS) / JS

About a code

Search Input Context Animation

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

Responsive: no

Dependencies: -

Author

  • _j_

Made with

  • HTML / CSS (SCSS) / JS

About a code

Diagonal Menu With Search

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

Responsive: yes

Dependencies: -

Author

  • Kristy Yeaton

Made with

  • HTML / CSS (SCSS) / JS

About a code

Search Button Animation

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

Responsive: yes

Dependencies: -

Author

  • Joseph Martucci

Made with

  • HTML / CSS (SCSS) / JS

About a code

Full Page 3D Effect Search

Click on the fixed position search icon to rotate the page content out and bring in the search box.

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

Responsive: no

Dependencies: font-awesome.css