Back

Crafting a Dynamic Search Bar with Animated Placeholder

Discover how to create an engaging search bar with a placeholder that animates seamlessly, guiding users intuitively.

HTML

In this tutorial, we will design an interactive search bar that provides visual feedback with an animated placeholder. The functionality focuses on user engagement through a simple yet effective design. The HTML structure is straightforward, involving a container wrapping around an input field and a button containing a search icon.

        <div class="search-bar-container">
          <input type="text" class="search-input" placeholder="Search here...">
          <button class="search-button">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#5b5b5b" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M10 18a8 8 0 100-16 8 8 0 000 16z" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35" />
            </svg>
          </button>
        </div>

CSS

The CSS styling is crucial to achieve the desired effect for the search bar. We'll set a base design for our container, input, and button and introduce animations for the placeholder.

        .search-bar-container {
          display: flex;
          align-items: center;
          border: 1px solid #ccc;
          border-radius: 25px;
          padding: 5px 10px;
          max-width: 300px;
          transition: box-shadow 0.3s ease;
        }
        .search-bar-container:hover {
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

Here, the container is set to a flexible box display, aligning its child elements center along the y-axis. Padding and border-radius provide a rounded shape, and the hover effect offers slight shadowing to give a lifted appearance.

        .search-input {
          border: none;
          outline: none;
          flex: 1;
          padding: 5px;
          font-size: 16px;
          transition: all 0.3s ease;
        }
        .search-input::placeholder {
          color: transparent;
          transition: color 0.3s ease;
        }
        .search-input:focus::placeholder {
          color: #bbb;
        }

The input field is given a seamless, borderless appearance to maintain focus on the user interaction with content. The flexible property 'flex: 1' allows it to grow and shrink to fit available space uniformly. The real magic is in the placeholder styling, where color transitions create an animated effect upon user focus.

        .search-button {
          background: none;
          border: none;
          cursor: pointer;
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .search-button svg {
          height: 20px;
          width: 20px;
        }

The button is styled cleanly with no background to keep it minimal, focusing user attention on the search interaction. The SVG icon within it acts as an essential visual cue. Flex properties position it desirably within its area, ensuring ease of usability.

Conclusion

This search bar is designed to fit seamlessly into any modern web page layout, offering interactive feedback with a captivating placeholder animation. It demonstrates how small details can enhance user experience and engagement, guiding them visually and making the interface more intuitive and attractive.

Whole code

<div class="search-bar-container">
  <input type="text" class="search-input" placeholder="Search here...">
  <button class="search-button">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#5b5b5b" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M10 18a8 8 0 100-16 8 8 0 000 16z" />
      <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35" />
    </svg>
  </button>
</div>


<style>
.search-bar-container {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 25px;
  padding: 5px 10px;
  max-width: 300px;
  transition: box-shadow 0.3s ease;
}
.search-bar-container:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.search-input {
  border: none;
  outline: none;
  flex: 1;
  padding: 5px;
  font-size: 16px;
  transition: all 0.3s ease;
}
.search-input::placeholder {
  color: transparent;
  transition: color 0.3s ease;
}
.search-input:focus::placeholder {
  color: #bbb;
}
.search-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-button svg {
  height: 20px;
  width: 20px;
}

</style>

Thank you for reading this article.

Crafting a Dynamic Search Bar with Animated Placeholder

HTML

CSS

Conclusion

Whole code

Comments

More inputs

Similar

See also