How to create search bar using CSS HTML

Next Page >>
div class container

How to » How to create search bar using CSS HTML

Study in this chapter:
1. - How to create simple search bar using CSS HTML?
2. - styling search box in html
3. - responsive search bar with icon

The search bar is the input section where users have to enter what they want to search for.

We can add CSS style to navbar as:
Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css

Example:

Search bar using CSS HTML code

Sticky navbar without javascript

Example:

<!DOCTYPE html>

  <html>

  <head>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <style>

  * {box-sizing: border-box;}
body {

  margin: 0;

  font-family: Arial, Helvetica, sans-serif;

  }
.topnav {

  overflow: hidden;

  background-color: #333;

  }
.topnav a {

  float: left;

  display: block;

  color: black;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 17px;

  background-color: #CCC;

  border-right-width: 2px;

  border-right-style: solid;

  border-right-color: #FFF;

  }
.topnav a:hover {

  background-color: #ddd;

  color: black;

  }
.topnav a.active {

  background-color: #093;

  color: white;

  border-right-width: 2px;

  border-right-style: solid;

  border-right-color: #FFF;

  }
.topnav .search-container {

  float: right;

  }
.topnav input[type=text] {

  padding: 6px;

  margin-top: 8px;

  font-size: 17px;

  border: none;

  }
.topnav .search-container button {

  float: right;

  padding: 6px 10px;

  margin-top: 8px;

  margin-right: 16px;

  background: #ddd;

  font-size: 17px;

  border: none;

  cursor: pointer;

  }
.topnav .search-container button:hover {

  background: #ccc;

  }
@media screen and (max-width: 730px) {

  .topnav .search-container {

  float: none;

  }

  .topnav a, .topnav input[type=text], .topnav .search-container button {

  float: none;

  display: block;

  text-align: left;

  width: 100%;

  margin: 0;

  padding: 14px;

  }

  .topnav a {

  border-bottom-width: 2px;

  border-bottom-style: solid;

  border-bottom-color: #FFF;

  }

  .topnav input[type=text] {

  border: 1px solid #ccc; 

  }

  }

  </style>

  </head>

  <body>
<div class="topnav">

  <a class="active" href="#home">Home</a>

  <a href="#services">Services</a>

  <a href="#products">Products</a>

  <a href="#about">About</a>

  <a href="#contact">Contact</a>

  <div class="search-container">

  <form action="/index.php">

  <input type="text" placeholder="Search.." name="search">

  <button type="submit"><i class="fa fa-search"></i></button>

  </form>

  </div>

  </div>
<div style="padding-left:16px">

  <h2>Responsive Search Bar</h2>

  <p>Navigation bar with a search box and a submit button inside of it.</p>

  <p>Resize the browser window to see the responsive effect.</p>

  </div>
</body>

  </html>

Create a stylish Search Bar using HTML and CSS

Example.

<!DOCTYPE html>

  <html>

  

  <head>

  <title>

  Create a Search Bar using HTML and CSS

  </title>

  

  <meta name="viewport"

  content="width=device-width, initial-scale=1">

  

  <link rel="stylesheet" href=

  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  

  <style>

  #navlist {

  background-color: #0074D9;

  position: absolute;

  width: 100%;

  }

  

  #navlist a {

  float:left;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 12px;

  text-decoration: none;

  font-size: 15px;

  }

  .navlist-right{

  float:right;

  }

  

  #navlist a:hover {

  background-color: #ddd;

  color: black;

  }

  

  .search input[type=text]{

  width:300px;

  height:25px;

  border-radius:25px;

  border: none;

  

  }

  

  .search{

  float:right;

  margin:7px;

  

  }

  

  .search button{

  background-color: #0074D9;

  color: #f2f2f2;

  float: right;

  padding: 5px 10px;

  margin-right: 16px;

  font-size: 12px;

  border: none;

  cursor: pointer;

  }

  </style>

  </head>

  

  <body>

  

  <!-- Navbar items -->

  <div id="navlist">

  <a href="#">Home</a>

  <a href="#">Our Products</a>

  <a href="#">Careers</a>

  <a href="#">About Us</a>

  <a href="#">Contact Us</a>

  

  <!-- search bar right align -->

  <div class="search">

  

  <form action="#">

  <input type="text"

  placeholder=" Search Courses"

  name="search">

  <button>

  <i class="fa fa-search"

  style="font-size: 18px;">

  </i>

  </button>

  </form>

  </div>

  </div>

  

  <!-- logo with tag -->

  <div class="content">

  <h1 style="color:green; padding-top:40px;">

  search bar agernic.com

  </h1>
<p>

  Combining HTML and CSS Code: This is the final code that is

   the combination of the above two sections. It will be displaying

    the navigation bar containing search bar. 

  </p>


  </div>

  </body>

  </html>

Tags: search bar design with icon, How do I add CSS to my search bar? How do I style a search bar in HTML?, How do you search for something in CSS?, How do you search items in search bar?

Free CSS Search Boxes with SVG code examples

How to create free CSS Search Boxes code examples Made with Html / CSS(SCSS) / JS

<!DOCTYPE html>

  <html>

  

  <head>

  <title>

  Create a Search Bar using HTML and CSS

  </title>

  

  <meta name="viewport"

  content="width=device-width, initial-scale=1">
 

  <style>

  /*--------------------

  Body

  --------------------*/

  *,

  *::before,

  *::after {

  box-sizing: border-box;

  }
body {

  height: 100vh;

  margin: 0;

  background: #DEDEDE;

  color: #5a6674;

  font-size: 13px;

  font-family: "Roboto", sans-serif;

  overflow: hidden;

  }
/*--------------------

  App

  --------------------*/

  .search-form {

  position: relative;

  top: 50%;

  left: 50%;

  width: 350px;

  height: 40px;

  border-radius: 40px;

  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);

  transform: translate(-50%, -50%);

  background: #fff;

  transition: all 0.3s ease;

  }

  .search-form.focus {

  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);

  }
.search-input {

  position: absolute;

  top: 10px;

  left: 38px;

  font-size: 14px;

  background: none;

  color: #5a6674;

  width: 195px;

  height: 20px;

  border: none;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  outline: none;

  }

  .search-input::-webkit-search-cancel-button {

  -webkit-appearance: none;

  appearance: none;

  }
.search-button {

  position: absolute;

  top: 10px;

  left: 15px;

  height: 20px;

  width: 20px;

  padding: 0;

  margin: 0;

  border: none;

  background: none;

  outline: none !important;

  cursor: pointer;

  }

  .search-button svg {

  width: 20px;

  height: 20px;

  fill: #5a6674;

  }
.search-option {

  position: absolute;

  text-align: right;

  top: 10px;

  right: 15px;

  }

  .search-option div {

  position: relative;

  display: inline-block;

  margin: 0 1px;

  cursor: pointer;

  }

  .search-option div input {

  position: absolute;

  top: 0;

  left: 0;

  opacity: 0.01;

  cursor: pointer;

  }

  .search-option div span {

  position: absolute;

  display: block;

  text-align: center;

  left: 50%;

  transform: translateX(-50%);

  opacity: 0;

  background: #929AA3;

  color: #fff;

  font-size: 9px;

  letter-spacing: 1px;

  line-height: 1;

  text-transform: uppercase;

  padding: 4px 7px;

  border-radius: 12px;

  top: -18px;

  transition: all 0.2s ease-in-out;

  }

  .search-option div span::after {

  content: "";

  position: absolute;

  bottom: -3px;

  left: 50%;

  transform: translateX(-50%);

  border-top: 4px solid #929AA3;

  border-left: 4px solid transparent;

  border-right: 4px solid transparent;

  transition: all 0.2s ease-in-out;

  }

  .search-option div:hover span {

  opacity: 1;

  top: -21px;

  }

  .search-option div label {

  display: block;

  cursor: pointer;

  }

  .search-option div svg {

  height: 20px;

  width: 20px;

  fill: #5a6674;

  opacity: 0.6;

  transition: all 0.2s ease-in-out;

  pointer-events: none;

  }

  .search-option div:hover svg {

  opacity: 1;

  }

  .search-option div input:checked + label svg {

  fill: #e24040;

  opacity: 0.9;

  }

  .search-option div input:checked + label span {

  background: #e24040;

  }

  .search-option div input:checked + label span::after {

  border-top-color: #e24040;

  }

  </style>

  </head>

  

  <body>

  <!--
Follow me on

  Dribbble: https://dribbble.com/supahfunk

  Twitter: https://twitter.com/supahfunk

  Codepen: https://codepen.io/supah/
-->

  <form class="search-form">

  <input type="search" value="" placeholder="Search" class="search-input">

  <button type="submit" class="search-button">

  <svg class="submit-button">

  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#search"></use>

  </svg>

  </button>

  <div class="search-option">

  <div>

  <input name="type" type="radio" value="type-users" id="type-users">

  <label for="type-users">

  <svg class="edit-pen-title">

  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>

  </svg>

  <span>Users</span>

  </label>

  </div>

  

  <div>

  <input name="type" type="radio" value="type-posts" id="type-posts">

  <label for="type-posts">

  <svg class="edit-pen-title">

  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#post"></use>

  </svg>

  <span>Posts</span>

  </label>

  </div>

  <div>

  <input name="type" type="radio" value="type-images" id="type-images">

  <label for="type-images">

  <svg class="edit-pen-title">

  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#images"></use>

  </svg>

  <span>Images</span>

  </label>

  </div>

  <div>

  <input name="type" type="radio" value="type-special" id="type-special" checked="">

  <label for="type-special">

  <svg class="edit-pen-title">

  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#special"></use>

  </svg>

  <span>Special</span>

  </label>

  </div>

  </div>

  </form>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none">

  <symbol id="search" viewBox="0 0 32 32">

  <path d="M 19.5 3 C 14.26514 3 10 7.2651394 10 12.5 C 10 14.749977 10.810825 16.807458 12.125 18.4375 L 3.28125 27.28125 L 4.71875 28.71875 L 13.5625 19.875 C 15.192542 21.189175 17.250023 22 19.5 22 C 24.73486 22 29 17.73486 29 12.5 C 29 7.2651394 24.73486 3 19.5 3 z M 19.5 5 C 23.65398 5 27 8.3460198 27 12.5 C 27 16.65398 23.65398 20 19.5 20 C 15.34602 20 12 16.65398 12 12.5 C 12 8.3460198 15.34602 5 19.5 5 z" />

  </symbol>

  <symbol id="user" viewBox="0 0 32 32">

  <path d="M 16 4 C 12.145852 4 9 7.1458513 9 11 C 9 13.393064 10.220383 15.517805 12.0625 16.78125 C 8.485554 18.302923 6 21.859881 6 26 L 8 26 C 8 21.533333 11.533333 18 16 18 C 20.466667 18 24 21.533333 24 26 L 26 26 C 26 21.859881 23.514446 18.302923 19.9375 16.78125 C 21.779617 15.517805 23 13.393064 23 11 C 23 7.1458513 19.854148 4 16 4 z M 16 6 C 18.773268 6 21 8.2267317 21 11 C 21 13.773268 18.773268 16 16 16 C 13.226732 16 11 13.773268 11 11 C 11 8.2267317 13.226732 6 16 6 z" /></symbol>

  <symbol id="images" viewbox="0 0 32 32">

  <path d="M 2 5 L 2 6 L 2 26 L 2 27 L 3 27 L 29 27 L 30 27 L 30 26 L 30 6 L 30 5 L 29 5 L 3 5 L 2 5 z M 4 7 L 28 7 L 28 20.90625 L 22.71875 15.59375 L 22 14.875 L 21.28125 15.59375 L 17.46875 19.40625 L 11.71875 13.59375 L 11 12.875 L 10.28125 13.59375 L 4 19.875 L 4 7 z M 24 9 C 22.895431 9 22 9.8954305 22 11 C 22 12.104569 22.895431 13 24 13 C 25.104569 13 26 12.104569 26 11 C 26 9.8954305 25.104569 9 24 9 z M 11 15.71875 L 20.1875 25 L 4 25 L 4 22.71875 L 11 15.71875 z M 22 17.71875 L 28 23.71875 L 28 25 L 23.03125 25 L 18.875 20.8125 L 22 17.71875 z" />

  </symbol>

  <symbol id="post" viewbox="0 0 32 32">

  <path d="M 3 5 L 3 6 L 3 23 C 3 25.209804 4.7901961 27 7 27 L 25 27 C 27.209804 27 29 25.209804 29 23 L 29 13 L 29 12 L 28 12 L 23 12 L 23 6 L 23 5 L 22 5 L 4 5 L 3 5 z M 5 7 L 21 7 L 21 12 L 21 13 L 21 23 C 21 23.73015 21.221057 24.41091 21.5625 25 L 7 25 C 5.8098039 25 5 24.190196 5 23 L 5 7 z M 7 9 L 7 10 L 7 13 L 7 14 L 8 14 L 18 14 L 19 14 L 19 13 L 19 10 L 19 9 L 18 9 L 8 9 L 7 9 z M 9 11 L 17 11 L 17 12 L 9 12 L 9 11 z M 23 14 L 27 14 L 27 23 C 27 24.190196 26.190196 25 25 25 C 23.809804 25 23 24.190196 23 23 L 23 14 z M 7 15 L 7 17 L 12 17 L 12 15 L 7 15 z M 14 15 L 14 17 L 19 17 L 19 15 L 14 15 z M 7 18 L 7 20 L 12 20 L 12 18 L 7 18 z M 14 18 L 14 20 L 19 20 L 19 18 L 14 18 z M 7 21 L 7 23 L 12 23 L 12 21 L 7 21 z M 14 21 L 14 23 L 19 23 L 19 21 L 14 21 z" />

  </symbol>

  <symbol id="special" viewbox="0 0 32 32">

  <path d="M 4 4 L 4 5 L 4 27 L 4 28 L 5 28 L 27 28 L 28 28 L 28 27 L 28 5 L 28 4 L 27 4 L 5 4 L 4 4 z M 6 6 L 26 6 L 26 26 L 6 26 L 6 6 z M 16 8.40625 L 13.6875 13.59375 L 8 14.1875 L 12.3125 18 L 11.09375 23.59375 L 16 20.6875 L 20.90625 23.59375 L 19.6875 18 L 24 14.1875 L 18.3125 13.59375 L 16 8.40625 z M 16 13.3125 L 16.5 14.40625 L 17 15.5 L 18.1875 15.59375 L 19.40625 15.6875 L 18.5 16.5 L 17.59375 17.3125 L 17.8125 18.40625 L 18.09375 19.59375 L 17 19 L 16 18.40625 L 15 19 L 14 19.59375 L 14.3125 18.40625 L 14.5 17.3125 L 13.59375 16.5 L 12.6875 15.6875 L 13.90625 15.59375 L 15.09375 15.5 L 15.59375 14.40625 L 16 13.3125 z" />

  </symbol>

  </svg>

  <script>$('.search-input').focus(function(){

  $(this).parent().addClass('focus');

  }).blur(function(){

  $(this).parent().removeClass('focus');

  })</script>

  </body>

  </html>

Summary of description

<< Previous Page
HTML Button Style

Next Page >>
HTML Button Action

search bar design with icon, How do I add CSS to my search bar? How do I style a search bar in HTML?, How do you search for something in CSS?, How do you search items in search bar?
Search bar using CSS HTML - how to

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.