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

JavaScript uses setTimeout to achieve countdown effect

Implementing search box function with search icon based on html css

JavaScript uses setTimeout to achieve countdown effect

Write a publish-subscribe model with JS

Html Select option How to make the default selection

How to implement email alert in zabbix

A detailed introduction to the use of block comments in HTML

Set the contenteditable attribute to edit the content of HTML tags (can replace textarea)

Debian virtual machine created by VirtualBox shares files with Windows host

Mysql example of querying all lower-level multi-level sub-departments based on a certain department ID

How to change the CentOS server time to Beijing time

Button does not specify type as submit. Clicking the button does not jump to the specified URL.

Recommend

MySql 8.0.11 installation and configuration tutorial

Detailed explanation of MySQL limit usage and performance analysis of paging query statements

Docker container accesses the host's MySQL operation

The most creative 404 page design in history effectively improves website user experience

Detailed explanation of how to clear a few pixels of blank space under an image using CSS

Understanding the CSS transform-origin property

How to use Docker to package and deploy images locally

CSS flexible layout FLEX, media query and mobile click event implementation

Detailed graphic tutorial on installing and uninstalling Tomcat8 on Linux

Explanation of the process of docker packaging node project

How to use sed command to efficiently delete specific lines of a file

Advantages and disadvantages of conditional comments in IE

How to add shortcut commands in Xshell

Use pure CSS to disable the a tag in HTML without JavaScript

HTML table markup tutorial (48): CSS modified table