How to use HTML to make a fixed floating translucent search box on the mobile terminal

This time I will show you how to use HTML to make a fixed floating translucent search box on the mobile side. How to use HTML to make a fixed floating translucent search box on the mobile side. What are the precautions?. The following is a practical case. Let’s take a look.

Question. Question

In the mobile mall system, we often see a search box at the top of the page. Bloggers of this type of search box prefer to fix it at the top of the page. Transparent and suspended, part of the carousel can be vaguely seen.

To create such a search box, the key technical skills are:

fixed search box positioning

opacity set transparency

Solution. #First we define an html fragment:

<!-- 搜索框 -->
<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">搜索</span></span>
    </div>
  </form>
</header>
<!-- 一个背景图 实际上这里往往是轮播图 -->
<div class="background">
  <img src="bg.jpg">
</div>

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

Attached is the CSS style:

<style type="text/css">
body {
  margin: 0;  padding: 0;
  font-size: 14px; font-family: "microsoft yahei",&#39;Arial&#39;, &#39;Verdana&#39;,&#39;Helvetica&#39;, sans-serif;
}
.bar {
  position: fixed; top: 0; left: 0; right: 0; /* 决定了搜索框置顶 */
  height: 44px; padding: 0 10px;
  background-color: #fff; opacity: 0.8; /* 搜索框半透明效果 */
  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>

It’s a long CSS style, but its core is just two sentences: position: fixed; /* determines the top of the search box*/ and background-color : #fff; opacity: 0.8; /* Search box translucent effect*/, other styles are for page layout, the details of layout need to be written by readers to understand, and the process 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 animation effects through JS:

is used to switch the "search" position icon when the user switches input. The principle is very simple, add and remove class classes, These classes define styles.

.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">
/* 输入框获取到焦点 表示用户正在输入 */
$("#word").focusin(function() {
  $(".search-row").addClass("active iconfont icon-sousuo");
});
/* 输入框失去焦点 表示用户输入完毕 */
$("#word").focusout(function() {
  /* 判断用户是否有内容输入 */
  if ($(this).val()=="") {
    /* 没有内容输入 改变样式 */
    $(".search-row").removeClass("active iconfont icon-sousuo");
  } else {
    /* 有内容输入 保持样式 并提交表单 */
    $("#search").submit();
  }
});
</script>

Note: jQuery needs to be introduced here, don’t forget it!

Extension. Extension

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to solve the gap in the picture in H5

How to prompt if the H5 form verification fails

How to use localStorage and sessionStorage

The above is the detailed content of How to use HTML to make a fixed floating translucent search box on the mobile terminal. For more information, please follow other related articles on the PHP Chinese website!