W3docs
en
Log in

How to Create Search Boxes

Create and style beautiful search boxes without any JavaScript code. Learn the steps to create search boxes and find lots of examples in this tutorial.

Tags

Search boxes are ubiquitous on every website. They are handy for finding specific data. They may include autocomplete functions to assist users in searching.

In this snippet, we will talk about creating search boxes with CSS and HTML step by step.

Create HTML

  • Create a <form> tag which is used to add HTML forms to the web page for user input.
  • Add an <input> tag within the <form> element.
  • Also, include the placeholder saying "Search here!" and a class of "search".
  • Add another <input> with a class "submit" and value "Search".

How to create form for simple search box

<form action="/form/submit" method="GET"> 
  <input type="text" name="text" class="search" placeholder="Search here!">
  <input type="submit" name="submit" class="submit" value="Search">
</form>

Now, we have our search box, but we should apply a style to it.

Add CSS

How to style form for simple search box

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

After adding all the properties, run the code and see how you’ve created the search box!

Example of creating a search box with HTML and CSS:

Simple Search Box example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #8ebf42;
      }
      form {
        width: 400px;
        margin: auto;
        margin-top: 250px;
      }
      input {
        padding: 4px 10px;
        border: 0;
        font-size: 16px;
      }
      .search {
        width: 75%;
      }
      .submit {
        width: 70px;
        background-color: #1c87c9;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h2>Create search boxes</h2>
    <form action="/form/submit" method="GET">
      <input type="text" name="text" class="search" placeholder="Search here!" />
      <input type="submit" name="submit" class="submit" value="Search" />
    </form>
  </body>
</html>
Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose">
  <form action="/form/submit" method="GET">
    <input class="search" name="text" placeholder="Search here!" type="text" />
    <input class="submit" name="submit" type="submit" value="Search" />
  </form>
</div>

Example of creating a search box using a search icon from Font Awesome:

Search Box example with animation

<!DOCTYPE html>
<html>
  <head>
    <title>Awesome Search Box</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>
      body {
        margin: 0;
        padding: 0;
        background: #00a08d;
      }
      .search-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #666666;
        height: 40px;
        border-radius: 40px;
        padding: 10px;
        display: flex;
        justify-content: space-between;
      }
      .search-box:hover > .search-txt {
        width: 240px;
        padding: 0 6px;
      }
      .search-box:hover > .search-btn {
        background: white;
        color: black;
      }
      .search-btn {
        color: #eeeeee;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #2f3640;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.4s;
        color: white;
        cursor: pointer;
        text-decoration: none;
      }
      .search-btn > i {
        font-size: 20px;
      }
      .search-txt {
        border: none;
        background: none;
        outline: none;
        padding: 0;
        color: white;
        font-size: 16px;
        transition: 0.4s;
        line-height: 40px;
        width: 0px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="search-box">
      <input type="text" name="name" class="search-txt" placeholder="Type to search" />
      <a class="search-btn" href="#">
        <i class="fa fa-search" aria-hidden="true"></i>
      </a>
    </div>
  </body>
</html>
Try it Yourself »

In the given example, we used a Search icon from Font Awesome.

Let's see another example of search boxes created with pure HTML and CSS.

Search Box example with rounded borders and search icon

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>
      body {
        background: #cccccc;
      }
      .search {
        width: 100%;
        position: relative;
        display: flex;
      }
      .searchTerm {
        width: 100%;
        border: 3px solid #9e0098;
        border-right: none;
        padding: 5px;
        height: 20px;
        border-radius: 5px 0 0 5px;
        outline: none;
      }
      .searchTerm:focus {
        color: #380136;
      }
      .searchButton {
        width: 40px;
        height: 36px;
        border: 1px solid #9e0098;
        background: #9e0098;
        text-align: center;
        color: #eeeeee;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
        font-size: 20px;
      }
      .wrap {
        width: 30%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <h2>Create search boxes</h2>
    <div class="wrap">
      <div class="search">
        <input type="text" class="searchTerm" placeholder="Type" />
        <button type="submit" class="searchButton">
          <i class="fa fa-search"></i>
        </button>
      </div>
    </div>
  </body>
</html>
Try it Yourself »

Example of creating a search box using a hovering effect:

Rounded search box example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      *,
      *::after,
      *::before {
        margin: 0;
        padding: 0;
        box-sizing: inherit;
      }
      html {
        font-size: 50%;
      }
      body {
        box-sizing: border-box;
      }
      .container {
        width: 25rem;
        height: 100%;
        margin: 0 1rem;
        position: relative;
      }
      h2 {
        margin: 2rem;
        font-size: 20px;
      }
      .searchbar {
        font-size: 2.4rem;
        width: 25rem;
        height: 5rem;
        border: none;
        outline: none;
        border-radius: 10rem;
        padding: 2rem;
        transition: all .1s;
        transition-delay: .1s;
      }
      .searchbar:hover {
        width: 27rem;
        height: 6rem;
      }
      .button {
        height: 2rem;
        position: absolute;
        top: 1.5rem;
        right: 1rem;
        transition: all .1s;
        transition-delay: .1s;
      }
      .button:hover {
        cursor: pointer;
      }
      .searchbar:hover + .button {
        height: 2.5rem;
        top: 1.8rem;
        right: 0;
      }
      .searchbar::placeholder {
        opacity: .3;
      }
    </style>
  </head>
  <body>
    <h2>Create search box</h2>
    <div class="container">
      <input type="text" maxlength="12" placeholder="Search" class="searchbar" />
      <svg class="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
    </div>
  </body>
</html>
Try it Yourself »

The transition effect smoothly animates the width and height changes when hovering over the input field.