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

Native js implements custom scroll bar component

This article example shares the specific code of ...

Installation and configuration tutorial of Linux virtual machine under Windows operating system

Preface At work, we often need to operate in a Li...

About Vue's 4 auxiliary functions of Vuex

Table of contents 1. Auxiliary functions 2. Examp...

Detailed explanation of the idea of ​​using mysqldump+expect+crontab to implement mysql periodic cold backup in linux

Table of contents 1. Problems encountered 2. Idea...

Talking about Less and More in Web Design (Picture)

Less is More is a catchphrase for many designers....

Summary of CSS counter and content

The content property was introduced as early as C...

JavaScript timer to achieve seamless scrolling of pictures

This article shares the specific code of JavaScri...

Native js implements shopping cart logic and functions

This article example shares the specific code of ...

How to achieve seamless token refresh

Table of contents 1. Demand Method 1 Method 2 Met...

Method of using MySQL system database for performance load diagnosis

A master once said that you should know the datab...

What are the new CSS :where and :is pseudo-class functions?

What are :is and :where? :is() and :where() are p...

Detailed explanation of the role of the default database after MySQL installation

When you learn MySQL, you will find that it comes...

docker-maven-plugin packages the image and uploads it to a private warehouse

Table of contents 1. Introduction to docker-maven...

Detailed discussion of memory and variable storage in JS

Table of contents Preface JS Magic Number Storing...

What is COLLATE in MYSQL?

Preface Execute the show create table <tablena...