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

A brief understanding of the three uses of standard SQL update statements

1. Environment: MySQL-5.0.41-win32 Windows XP Pro...

Color hexadecimal color code table display and hexadecimal value comparison display for easy search

Hexadecimal code table of various colors [Part 1] ...

Detailed steps for embedding Baidu Maps in web pages and using Baidu Maps API to customize maps

Insert Baidu Map into the web page If you want to...

Detailed explanation of Docker data backup and recovery process

The data backup operation is very easy. Execute t...

Example code for implementing hexagonal borders with CSS3

The outermost boxF rotates 120 degrees, the secon...

JavaScript to achieve balance digital scrolling effect

Table of contents 1. Implementation Background 2....

Vue uses vue-quill-editor rich text editor and uploads pictures to the server

Table of contents 1. Preparation 2. Define the gl...

Detailed explanation of Angular structural directive modules and styles

Table of contents 1. Structural instructions Modu...

How to view the type of mounted file system in Linux

Preface As you know, Linux supports many file sys...

TCP performance tuning implementation principle and process analysis

Three-way handshake phase Number of retries for c...

JavaScript knowledge: Constructors are also functions

Table of contents 1. Definition and call of const...

Detailed explanation of three solutions to the website footer sinking effect

Background Many website designs generally consist...

Building FastDFS file system in Docker (multi-image tutorial)

Table of contents About FastDFS 1. Search for ima...

JavaScript implements displaying a drop-down box when the mouse passes over it

This article shares the specific code of JavaScri...

Briefly describe the four transaction isolation levels of MySql

Isolation Level: Isolation is more complicated th...