This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can follow ➕, like 👍 and add me on wechat: FrontendPicker. We invite you to join us to learn the frontend of communication and become better engineers. Click me to explore a new world!

preface

The same input box may look similar at first glance, but when you click on it, something wonderful happens. On the Nuggets page, I don’t know if anyone has noticed the search box in the navigation bar, but when you don’t touch it, it’s a tiny one. When you start typing, it gets longer! It’s a simple effect, but the user experience is much better. This article describes the effects of several different types of input boxes.

Bottom border class

Take a look at the effect above: when the input box is in focus, a blue line appears at the bottom, extending from center to end.

Ideas:

  1. This blue box is border-bottom? No, because there is a black border at the bottom, and the blue box is changing. Border-bottom cannot be implemented.
  2. Can you use ::after and ::before? Input cannot be set. Add a parent div around the input and set ::after. But there’s a problem. The parent node cannot be selected when you input:focus.
  3. Since input cannot be added and the parent node cannot use ::after, we need to consider adding a new element.
  .container {
      width: 300px;
      position: relative;
  }
  input {
      outline: none;
      width: 100%;
      border: 0;
      border-bottom: 1px solid # 070707;
  }

.borderBottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #3399ff;
    transition: 0.4 s;
}
input:focus ~ .borderBottom {
    width: 100%;
    transition: 0.4 s;
    left: 0;
}
<div class="container">
    <inputType ="text" placeholder=" bottom margininput"/ > <span class="borderBottom"></span>
</div>
Copy the code

Two things to note here,

  • Use outline: None to prevent other borders from appearing when input gets focus; To control the display.
  • The span tag starts at 50% and is 0 to 100% wide

This is the first category, just the bottom effect, where you can set the initial position of the span, make it longer from left to right, from middle to sides, etc

Background change class

Take a look at the effect above: when the input box is in focus, the background color changes in two corners.

If you do this effect directly, it may be more complicated, but with the example above it is very easy to implement.

  • The background is split into two pieces, that just adds ::after and ::before on the span.
  • With the background below, set z-index:-1;
.focusbg::before..focusbg::after {
    position: absolute;
    content: "";
    background-color: #83e8fa;
    width: 50%;
    height: 100%;
    z-index: -1;
}

.focusbg::before {
    left: 0;
    top: 0;
}

.focusbg::after {
    right: 0;
    bottom: 0;
}
input:focus ~ .focusbg:before,
input:focus ~ .focusbg:after {
    width: 0;
    height: 0;
}
Copy the code

Dynamic width

This is the easiest in terms of implementation and difficulty. For example, the search box for digging gold is made wider.

input {
    transition: all 0.3 s ease-in;
    width: 120px;
    display: block;
    text-align: center;
}
input:focus {
	width: 220px;
}
Copy the code

The effect here is to increase width to both sides!!

Floating placeholder

This effect appears in the previous article: juejin.cn/post/702551…

conclusion

An input box, as long as you have ideas, you can play flowers! This article is only listed by category, in fact, more effects, that is, these changes come from.

Ten thousand change is inseparable from it, a little, everywhere!