HOW TO CREATE A SEARCH INPUT BAR


<!DOCKTYPE HTML>
<HTML>
<HEAD>
<style>
input[type=text] {
 width:100%
 box-sizing:border-box;
 border:2px solid #ccc;
 border-radius:4px;
 font-size:16px;
 background-color:white;
 background-position:10px 10px;
 background-repeat:no-repeat;
 padding:12px 20px 12px 40px;
}
 .icon-container{
 position: relative;
 width:100%;
}
 .icon-container.fa-search{
 position: absolute;
 top:12px;
 left:15px;
 font-size:20px;
 color:#ccc;
}
</style>
<link rel="stylesheet"href="<i class"fa-brands fa-docker"></i>'>
</head>
<body>

<h2>Input field with an icon inside </h2>
 
<form>
 <div class="icon-container">
 <i class="fa fa-search"></i>
 <input type="text" name="search"placeholder="Search..">
</div>
</form>

</body>
</html>


Comments

Post a Comment

Popular posts from this blog

HOW TO CREATE DROPDOWN MENU

Image
 <!DOCTYPE html> <html> <head> <style> .dropbtn {   background-color: #4CAF50;   color: red;   padding: 16px;   font-size: 16px;   border: yellow;   cursor: pointer; } .dropdown {   position: relative;   display: inline-block; } .dropdown-content {   display: none;   position: absolute;   background-color: #f9f9f9;   min-width: 160px;   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);   z-index: 1; } .dropdown-content a {   color: black;   padding: 12px 16px;   text-decoration: none;   display: block; } .dropdown-content a:hover {   background-color: #f1f1f1; } .dropdown:hover .dropdown-content {   display: block; } .dropdown:hover .dropbtn {   background-color: #3e8e41; } </style> </head> <body> <h2>Dropdown Menu</h2> <p>Move the mouse over the button to open the dropdown menu.</p> <div class="dropdown"> ...
Read more

How to merge a table.

Image
 <!DOCTYPE html> <html> <head>     <title>Tables</title> </head> <body>     <table border="1">         <tr>             <th>S.no.</th>             <th>Name</th>              <th>course name </th>                      </tr>         <tr>             <td>1</td>             <td>Bhumika</td>             <td >Web Designing</td>         </tr>         <tr>              <td>2</td>             <td>Mitali</td>     ...
Read more