Implementing search box function with search icon based on html css

Preface

Let me share with you how to make a search box with small icons which is very useful in the front end.

Effect display

insert image description here

Basic idea

1. Use absolute positioning to place the search image above the search box

2. Set the text indentation of the input box to the size of the search image plus the margins on the left and right sides of the image

Prepare

Just a search icon image, similar to the one below

insert image description here

Code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Search box demo</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   width: 100vw;
   height: 100vh;
   background: radial-gradient(at center,
    #3498db,#2980b9);
   display: flex;
   justify-content: center;
   align-items: center;
  }
  div.search{
   height: 40px;
   width: 500px;  
  }
  div.search form{
   width: 100%;
   height: 100%;
  }
  div.search form input:nth-child(2){
   width: 400px;
   height: 100%;
   font-size: 16px;
   text-indent: 40px;
   border: none;
   float: left;
  }
  div.search form input:nth-child(3){
   width: 100px;
   height: 100%;
   font-size: 16px;
   letter-spacing: 5px;
   border: none;
  }
  div.search form img{
   position: absolute;
   left: 50vw;
   transform: translateX(-250px);
   margin-top: 10px;
   margin-left: 10px;
   height: 20px;
  }
 </style>
</head>
<body>
 <div class="search">
  <form action="#" method="post">
   <img src="./search_ico.png" alt="">
   <input type="text" name="condition" placeholder="Please enter the search condition">
   <input type="submit" value="Search">
  </form> 
 </div>
</body>
</html>

Summarize

The above is the search box function with search icon based on HTML CSS introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: Several navigation directions that will be popular in the future

>>: MySQL group query optimization method

How are spaces represented in HTML (what do they mean)?

Implementing search box function with search icon based on html css

How are spaces represented in HTML (what do they mean)?

Detailed explanation of JS ES6 coding standards

How to ensure that every page of WeChat Mini Program is logged in

Mybatis mysql delete in operation can only delete the first data method

MySQL series of experience summary and analysis tutorials on NUll values

Does MySql need to commit?

Solution to the problem that mysql local login cannot use port number to log in

Detailed explanation of how to enable HSTS in nginx to force the browser to redirect to HTTPS access

Summary of basic usage of CSS3 @media

Circular progress bar implemented with CSS

Recommend

Completely uninstall MySQL database in Windows system to reinstall MySQL

5 ways to quickly remove the blank space of Inline-Block in HTML

How to force vertical screen on mobile pages

Nginx content cache and common parameter configuration details

Solution to automatically submitting the form and jumping to other pages after pressing Enter on the web page

MySQL binlog opening steps

Example of converting timestamp to Date in MySQL

W3C Tutorial (1): Understanding W3C

How to implement the jQuery carousel function

Detailed explanation of the rounding accuracy problem of the toFixed() method in JS

Negative distance (empathy) - iterative process of mutual influence

Nginx server https configuration method example

JavaScript manual implementation of instanceof method

Comparative Analysis of UI Applications of Image Social Networking Sites (Figure)

Example code for converting html table data to Json format