HTML implements a fixed floating semi-transparent search box on mobile

HTML implements a fixed floating semi-transparent search box on mobile

Question.

In the mobile shopping mall system, we often see a search box at the top of the page. Bloggers prefer this type of search box that is fixed at the top of the page, semi-transparent and suspended, so that part of the carousel can be vaguely seen.

To create such a search box, the technical key lies in:

  • fixed search box positioning
  • opacity Sets the transparency

Solution.

First we define an html fragment:

<!-- Search Box -->
<header class="bar">
  <form name="search" class="search" id="search" action="">
    <div class="search-row">
      <input type="search" name="word" id="word">
      <span class="placeholder "><span class="iconfont icon-sousuo"></span><span class="text">Search</span></span>
    </div>
  </form>
</header>
<!-- A background image is often a carousel image-->
<div class="background">
  <img src="bg.jpg">
</div>

The header tag is a search box, and the div below is a background image.

Also attach the CSS style:

<style type="text/css">
body {
  margin: 0; padding: 0;
  font-size: 14px; font-family: "microsoft yahei",'Arial', 'Verdana','Helvetica', sans-serif;
}
.bar {
  position: fixed; top: 0; left: 0; right: 0; /* Determines whether the search box is fixed to the top */
  height: 44px; padding: 0 10px;
  background-color: #fff; opacity: 0.8; /*Search box semi-transparent effect*/
  z-index: 10;
}
.bar form {
  display: block; padding: 0; margin: 0;
}
.search-row {
  position: relative;
  height: 30px; padding: 7px 0;
}
.search-row input[type=search] {
  position: absolute; top: 7px;
  height: 30px; line-height: 21px; width: 100%; padding: 10px 15px 10px 30px;
  border: 0; border-radius: 6px; outline: 0; background-color: rgba(0,0,0,0.1);
  font-size: 16px; text-align: center;
  z-index: 100;
}
.search-row .placeholder {
  position: absolute; top: 2px; left: 0; right: 0;
  display: inline-block; height: 34px; line-height: 34px;
  border: 0; border-radius: 6px;
  font-size: 16px; text-align: center; color: #999;
  z-index: 1;  
}
.search-row .placeholder .iconfont {
  display: inline-block; width: 19px; line-height: 24px; padding: 10px 0; 
  font-size: 21px; color: #666;
}
.search-row .placeholder .text {
  line-height: 40px;
  vertical-align: top;
}
.background img {
  width: 100%;
}
.active:before {
  position: absolute; top: 11px; left: 5px; right: auto;
  display: block; margin-right: 0;
  font-size: 21px;
}
.active input[type=search] {
  text-align: left
}
.active .placeholder{
  display: none
}
</style>

This is a long section of CSS style, but its core is just two sentences: position: fixed; /* determines the search box to be fixed to the top*/ and background-color: #fff; opacity: 0.8; /* search box translucent effect*/. The other styles are for the layout of the page. The details of the layout need to be written and understood by the readers themselves, which may take some time.

In this way, we have completed a static search box:

Note: The search icon here uses iconfont. Readers can download it from the iconfont vector icon library.

At this point, we still need to implement some animations through JS:

It is used to switch the "search" location icon when the user switches input. The principle is very simple, adding and removing class classes, which define the style.

.active:before {
  position: absolute; top: 11px; left: 5px; right: auto;
  display: block; margin-right: 0;
  font-size: 21px;
}
.active input[type=search] {
  text-align: left
}
.active .placeholder{
  display: none
}
<script type="text/javascript">
/* The input box gets the focus, indicating that the user is typing*/
$("#word").focusin(function() {
  $(".search-row").addClass("active iconfont icon-sousuo");
});
/* Input box loses focus, indicating that the user has finished inputting*/
$("#word").focusout(function() {
  /* Check if the user has input content*/
  if ($(this).val()=="") {
    /* No content input to change style*/
    $(".search-row").removeClass("active iconfont icon-sousuo");
  } else {
    /* Input content to keep the style and submit the form*/
    $("#search").submit();
  }
});
</script>

Note: You need to import jQuery here, don't forget it!

Extension.

Complete HTML code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
body {
  margin: 0; padding: 0;
  font-size: 14px; font-family: "microsoft yahei",'Arial', 'Verdana','Helvetica', sans-serif;
}
.bar {
  position: fixed; top: 0; left: 0; right: 0; /* Determines whether the search box is fixed to the top */
  height: 44px; padding: 0 10px;
  background-color: #fff; opacity: 0.8; /*Search box semi-transparent effect*/
  z-index: 10;
}
.bar form {
  display: block; padding: 0; margin: 0;
}
.search-row {
  position: relative;
  height: 30px; padding: 7px 0;
}
.search-row input[type=search] {
  position: absolute; top: 7px;
  height: 30px; line-height: 21px; width: 100%; padding: 10px 15px 10px 30px;
  border: 0; border-radius: 6px; outline: 0; background-color: rgba(0,0,0,0.1);
  font-size: 16px; text-align: center;
  z-index: 100;
}
.search-row .placeholder {
  position: absolute; top: 2px; left: 0; right: 0;
  display: inline-block; height: 34px; line-height: 34px;
  border: 0; border-radius: 6px;
  font-size: 16px; text-align: center; color: #999;
  z-index: 1;  
}
.search-row .placeholder .iconfont {
  display: inline-block; width: 19px; line-height: 24px; padding: 10px 0; 
  font-size: 21px; color: #666;
}
.search-row .placeholder .text {
  line-height: 40px;
  vertical-align: top;
}
.background img {
  width: 100%;
}
.active:before {
  position: absolute; top: 11px; left: 5px; right: auto;
  display: block; margin-right: 0;
  font-size: 21px;
}
.active input[type=search] {
  text-align: left
}
.active .placeholder{
  display: none
}
</style>
</head>
<body>
<!-- Search Box -->
<header class="bar">
  <form name="search" class="search" id="search" action="">
    <div class="search-row">
      <input type="search" name="word" id="word">
      <span class="placeholder "><span class="iconfont icon-sousuo"></span><span class="text">Search</span></span>
    </div>
  </form>
</header>
<!-- A background image is often a carousel image-->
<div class="background">
  <img src="bg.jpg">
</div>
</body>
<script type="text/javascript">
/* The input box gets the focus, indicating that the user is typing*/
$("#word").focusin(function() {
  $(".search-row").addClass("active iconfont icon-sousuo");
});
/* Input box loses focus, indicating that the user has finished inputting*/
$("#word").focusout(function() {
  /* Check if the user has input content*/
  if ($(this).val()=="") {
    /* No content input to change style*/
    $(".search-row").removeClass("active iconfont icon-sousuo");
  } else {
    /* Input content to keep the style and submit the form*/
    $("#search").submit();
  }
});
</script>
</html>

Summarize

The above is the introduction of HTML to realize the fixed floating semi-transparent search box on mobile. I hope it will be helpful to everyone. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<:  Implementation of CSS dynamic height transition animation effect

>>:  MySQL database constraints and data table design principles

Recommend

How to use worker_threads to create new threads in nodejs

Introduction As mentioned in the previous article...

How to monitor and delete timed out sessions in Tomcat

Preface I accidentally discovered that the half-h...

Detailed explanation of Vue ElementUI manually uploading excel files to the server

Table of contents Overview Property settings Proc...

Specific usage of fullpage.js full screen scrolling

1.fullpage.js Download address https://github.com...

Use CSS to create 3D photo wall effect

Use CSS to create a 3D photo wall. The specific c...

Detailed explanation of the default values ​​of width and height in CSS: auto and %

in conclusion % of width: defines the percentage ...

Example code for using CSS to darken the font color of the selected area when scrolling

When encapsulating the date picker, you need to d...

Implementation of k8s node rejoining the master cluster

1. Delete node Execute kubectl delete node node01...

After restarting the Baota panel, it prompts -ModuleNotFoundError: No module named 'geventwebsocket'

background: Because the server deployed the flask...

React implements import and export of Excel files

Table of contents Presentation Layer Business Lay...

Detailed Example of Row-Level Locking in MySQL

Preface Locks are synchronization mechanisms used...

How to use docker to deploy front-end applications

Docker is becoming more and more popular. It can ...

Detailed explanation of Apache SkyWalking alarm configuration guide

Apache SkyWalking Apache SkyWalking is an applica...

What are HTML inline elements and block-level elements and their differences

I remember a question the interviewer asked durin...

Use of kubernetes YAML files

Table of contents 01 Introduction to YAML files Y...