January 29, 2022

Searchbox

<div class="container">
       <div class="col-md-4"><div class="widget">
         <div class="widget-search">
           <form class="form-inline form">
             <div class="widget-searchbox">
               <button type="submit" class="search-btn"> <i class="fa fa-search"></i>
               </button>
               <input type="text" placeholder="Search Here..." class="form-control">
             </div>
           </form>
         </div>
       </div></div>
   </div>

 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .widget { margin-top: 80px;}
    .widget-searchbox{position: relative; width: 100%;}
.form-inline .form-control {display: inline-block; vertical-align: middle; width: 100%;}
.widget-searchbox .search-btn {background: none; border: none; color: #2575fc; font-size: 14px; outline: medium none; overflow: hidden; position: absolute; right: 20px; top: 50%; cursor: pointer; transform: translateY(-50%);}
.form-inline .form-control {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}
        .form-control {
    height: 50px;
    border-radius: 5px;
    font-size: 13px;
    color: #1c1d3e;
    background: #fafaff;
    border: 1px solid transparent;
}
    </style>

 

Leave a Reply

Your email address will not be published. Required fields are marked *