What goes into a great search experience?

The Elements of Search [Infographic]

9 HTML and CSS Examples to Design High Converting Search Bars

9 HTML and CSS Examples to Design High Converting Search Bars

Do you know what the most important part of your ecommerce site is?

It’s not your logo or your product images. It’s the search bar. 

The search bar is a critical part of any ecommerce website. It allows users to find exactly what they are looking for. 

Conversion rates from people that use on-site search bars are almost double than those that don’t. 

As a front-end web developer, you can help ecommerce companies boost their conversion rates by optimizing the way they design search bars. 

In this article, we will give you 9 HTML/CSS/JavaScript examples you can use in your code. 

Take these code snippets as needed to create perfect search bar design for your website.

  1. Use standard HTML5 elements
  2. Use vanilla JavaScript for simple use-cases
  3. Consider using React to handle search states
  4. Use pre-built JavaScript components
  5. Focus on accessibility
  6. Label the typeahead result
  7. Use animations
  8. Use icons for the search button
  9. Add a way to clear the search box

Search terminology

Before we get into the examples, it’s important to understand the terminology that we use when discussing search bars.

Based on interactions that people have with a search bar, we consider:

  • Autocomplete: This is a feature that provides suggestions for what users can search for as they type into the search bar. Autocomplete can speed up the search process by providing options for users to select from.
  • Instant search: This is a feature that displays results as soon as a user types in their query, before they have finished typing it all out. It makes the experience faster and easier since there’s no need to press enter or click “search”.
  • Filters and facets: These are two ways to help users narrow down a search by viewing results that match certain criteria, such as price or category of items. We can use them with one another to find the perfect item for their needs.

What do people expect from an on-site search bar?

When people visit a site, they expect the site’s internal search bar to understand their query and match with products that are specifically on that website. 

As front-end developers, we should place the search bar on the prominent locations on a page and design it in a way that is easy to use. Web designers usually place them in the header area, so it’s always easily accessible.

Understand user-intent

One of the most important things to keep in mind when designing a search bar is understanding user-intent. 

The goal is to make it as easy as possible for users to find what they are looking for on your website.

Some questions that you need to ask in order to understand user-intent are:

  • What are users looking for when they use your search bar?
  • How do they phrase their queries?
  • Are there certain terms the audience uses more often than others?

Once you have a good understanding of user-intent, you can design your search bar to better match their needs. When you understand the intent, customize your components, animations, icons, and HTML/CSS.

It's important to have a proper base structure. Once you get the basics down, you can apply styling via CSS code to make it more user-friendly.

To cover the basics:

2. Use vanilla JavaScript for simple use-cases

Using vanilla javascript and standard HTML5 elements will also help your search bars work across all browsers on desktops and mobile devices.

Following a standard gives flexibility if the backend search engine changes. For example, if you decide to migrate to Search.io, you can use the Search API to fetch search results. Your front-end JavaScript would stay the same.

The following CodePen is a great snippet to start. It demonstrates autocomplete search component built using vanilla JavaScript:

autocomplete
https://codepen.io/trevoreyre/pen/bvwOeL


3. Consider using React to handle search states

Using React can be helpful when building search bars because it allows you to create reusable components. This makes the code more maintainable, scalable, and testable.

Moreover, there are many states in a search bar, making it perfect for React to handle.

For example, this CodePen uses React state to easily switch between different search bar interactions. It has three states: initiated, leaving, and returning. Based on different states, it shows a different message under the bar which helps create interaction with the user.

search react states
https://codepen.io/TheVVaFFle/pen/zYEjNyo

4. Use pre-built JavaScript components

If you are dealing with a complex use-case, pre-built components can save you hours.

There are many pre-built components for search bars you can use on your websites. This will save you time and allow you to focus on adjusting the design of the search bar to match your brand rather than having to build it from scratch.

Search.io offers a powerful search interface using pre-built React components. The React SDK gives you intuitive autocomplete, instant results, and styling. This is not a proprietary library, it can be used with any search solution. So, you can use components to create reusable templates for your projects.

For example, the Input component is powerful. Out-of-the box, it offers suggestions, typeahead and instant search modes. Under the hood, it uses the HTML input field.

It’s simple to customize the look and feel of search. You can use pure CSS classes. If you are using Bootstrap or similar framework, it's just a few lines of CSS to make search components match your branding.

5. Focus on accessibility

When designing a search bar, it’s important to focus on accessibility. 

This means making sure that the search bar is easy to use for everyone, including people with disabilities.

Use a `form` element to create the search bar and make sure that all the inputs have proper labels.

ARIA: `search` role

Use the ARIA (Accessible Rich Internet Applications) standard to provide additional information about the search bar to assistive technologies.

The `search` role is a landmark role that can wrap all elements that make the search form. The attribute tells the browser that this element is a search bar.

Best practice is to use the `search` role in combination with the HTML form element:

Include the HTML `label` element

The HTML `label` element should encompass the text that is displayed next to a form field. This ensures screen readers can read out loud what users are supposed to enter into the search bar, which helps people with disabilities know what they need to do in order for their searches to work properly.

Search field placeholder

The HTML `placeholder` attribute can be used to provide additional information about what users should enter into a search bar. 

Make it talk to your audience. If you are selling books, instead of just saying “Search”, your placeholder can be “Search by title, author, or ISBN”.

Learn more about search accessibility design guidelines on Search.io’s WCAG overview blog.

6. Label the typeahead result

If your search bar merges results from different data sources, it's important to label the typeahead. This will help users understand which category their results are coming from.

For example, eBay shows the category where each result is coming from: 

typeahead results

The styling is simple, but it helps users to quickly scan through the options and find what they are looking for.

As in eBay’s example, the CSS style of the dropdown popup doesn’t have to be complex. Bolding the `href` element of the list items and making it a different color can be enough.

Typeahead styling is also available via Search.io’s React libraries.

7. Use Animations

Animations can be helpful when used correctly, but they can also be distracting and annoying if overdone.

You should use animations sparingly in order to avoid overwhelming users and keeping their focus on the task at hand—finding what they are looking for on your website.

When you use animations, make sure that they are smooth and add value to the user experience. For example, animations are great for an expandable search bar. But on the other hand, having an animated search button might be annoying if it's jumping around when users are typing.

Loading spinner progress bar

Although modern search engines are quick, we, the web developers, need to consider the fact that there are still people out there with slow connections.

That's why we use spinners, or progress bars, to show people that the search is in progress.

For example, this CodePen demo shows how to use loading spinner animations to show that the search is processing.

progress bar animation
https://codepen.io/rickzanutta/pen/NNzGVd

The author created the spinning effect using CSS animation applied using the `:before` selector:

The demo uses jQuery, but the code is lightweight and can be ported to vanilla JavaScript or React.

8. Use icons for the search button

Magnifying glass icon became a universal symbol for the search submit button. Go to any webpage and you will see one in the search bar.

When you design your search icon, stick with the standard. Use colors to make it match your brand, but don’t use any other symbols.

SVG images are the safest choice because they scale well for all screen sizes and can be used with CSS background images and gradients.

For example, this pen shows how you can create a magnifying glass icon using SVG symbol markup:

search icon
https://codepen.io/chrisgannon/pen/yOKXGE

9. Add a way to clear the search box

A way to clear the search will help users who type in something incorrectly or find that what they are looking for isn't coming up.

Adding a button that allows them to simply click and empty out their input helps make it easy for them to get started again with a clean slate.

On cursor hover, the "Clear" button appears.

The "clear" button is important on mobile screens because using the keyboard to clear the text is an annoyance for users.

For example, this CodePen demo shows how to clear the input by changing the `value` property on the HTML element. 

search bar design
https://codepen.io/qkevinto/pen/GZdMrG


Takeaways for perfect search box design

A well-designed search bar can help users find what they are looking for on your website quickly and easily. 

Remember to: 

  • Think about how you can use reusable components or plugins. For web developers, reusability is a key concept. It speeds up your workflow and makes it easier to update multiple pages at once.
  • Remember to use standard HTML elements to ensure cross-browser compatibility.
  • Focus on accessibility by using the `role=search` attribute and the `label` element.
  • If you want your search bar to be visually appealing, try using icons for quick visual feedback. 
  • Use SVG images for the search button. SVGs can scale with no loss of quality and are easy to implement into CSS background images or gradients.
  • Pay attention to details. A hover effect on the search field will make it feel more interactive and alive.
  • Include a way to clear the search box for users who type in something incorrectly or find that what they are looking for isn't coming up.
  • Review the backend search functionality so your frontend can use all the features.

By following the tips in this article, you will create a search bar that is both user-friendly and visually appealing. Search.io’s free React libraries will give you a headstart with reusable, configurable components.

About the author

Josip Miskovic is a full-stack web developer that specializes in ecommerce. Josip has worked with various companies to improve their conversion using search.

Similar articles

User Experience (UX)
Best Practice

Drastically Improve Your Website's UX by Improving Site Search

Best Practice

An Introduction to Custom Search Engines

Ecommerce
Best Practice

How to Get a Competitive Edge with Smart (and Surprisingly Easy) E-commerce Site Search Solutions