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

Common parameters of IE web page pop-up windows can be set by yourself

Implementing search box function with search icon based on html css

Common parameters of IE web page pop-up windows can be set by yourself

Detailed explanation of JS array methods

How to unify the character set on an existing mysql database

How to choose between MySQL CHAR and VARCHAR

Apache Bench stress testing tool implementation principle and usage analysis

The use of textarea in html and common problems and case analysis

Detailed explanation of Nginx's rewrite module

Teach you how to build a Hadoop 3.x pseudo cluster on Tencent Cloud

W3C Tutorial (2): W3C Programs

Implementation of running SQL Server using Docker

Recommend

Example analysis of the use of GROUP_CONCAT in MySQL

Detailed explanation of the difference between WeChat applet bindtap and catchtap

Docker uses the Prune command to clean up the none image

HTML table tag tutorial (3): width and height attributes WIDTH, HEIGHT

CSS warped shadow implementation code

Summary of Vue component basics

Key features of InnoDB - insert cache, write twice, adaptive hash index details

How to use geoip to restrict regions in nginx

When adding a Windows 2008 server subdomain to a parent domain, an error message appears: the domain already exists

A brief discussion on two methods to solve space-evenly compatibility issues

How to use skeleton screen in vue project

Docker installs redis 5.0.7 and mounts external configuration and data issues

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

Detailed explanation of the use of Gulp.js, a powerful tool for front-end task construction

Detailed description of nginx from compilation and installation to configuration file description in Chinese