Search Text Property in CSS

This Example leads to learn how to add a search box inside a responsive navigation menu.This < input > elements of type search are text fields designed for the user to enter search queries into.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


</head>
<body>
  <h1>Search Textbox in CSS</h1>
  <div class="search-bar">
    <input type="text" class="search-text" placeholder="Search Text">
    <button class="btn-search">
      <i class="fa fa-search"></i>
    </button>
  </div>
</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');


*{
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  width: 100vw;
  height: 100vh; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:30px;
}
h1{
  font-weight: 500;
  font-size: 18px;
  text-transform: uppercase;
  color:#ff4757;
}

.search-bar{
  max-width: 600px;
  display: inline-flex;
}

.search-text{
  width: 400px;
  padding: 10px;
  outline: none;
  border:1px solid #ff4757;
  border-radius: 5px 0 0 5px;
  transition: 0.5s;
  background-color: rgba(255, 71, 87,0.1);
}

.search-text::placeholder{
  color:#ff4757;
}

.search-text:focus{
  background-color: #fff;
}

.btn-search{
  width: 40px;
  background-color:  #ff4757;
  outline: none;
  border: none;
  color:white;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

Output

Search Text Property in CSS

Source Code :

style.css

Output

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects