How to create search bar using html and css

February 01, 2021 February 27, 2021

copied button

         <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="" content="">
    <title> search bar</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" integrity="sha512-BnbUDfEUfV0Slx6TunuB042k9tuKe3xrD6q4mg5Ed72LTgzDIcLPxg6yI2gcMFRyomt+yJJxE+zJwNmxki6/RA==" crossorigin="anonymous" />

    <style>

*{
  margin: 0px;
  padding: 0px;
}

body{
  position: absolute;
  width:20rem;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #7ea0a8;
}

a, a:hover{
  text-decoration: none;
}

.searchbox{
  position: relative;
}

#searchtext{
  width: 14rem;
  padding: 1rem;
  border-radius: 50px;
  outline: none;
  border: none;
  transition: 0.9s;
}
.searchbtn{
  width: 40px;
  height: 40px;
  position: absolute;
  color:white;
  border: none;
  font-size: 30px;
  border-radius: 50px;
  background-color: blue;
  display: grid;
  place-items: center;
  right: 2.2rem;
  outline: none;
  top: 0.2rem;
  cursor: pointer;
  transition: 0.8s all linear;
}

.searchbtn:hover{
 font-size: 35px; 
}
    </style>
  </head>
  <body>
    <div class="searchbox">
        <input type="text" name="searchbr" placeholder="Search" id="searchtext" value="" />
        
        <button type="submit" class="searchbtn">  <i class="fas fa-search " alt="e"></i></button>
    </div>
  </body>
</html>

HTML and CSS Source Code

Daily Tech

How to create search bar using html and css

Post a Comment