• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

While logging into Twitter, I found that his input box placeholder was floating. So when the input box gets focus, the placeholder will go up there. In my opinion, the advantages of this login mode are as follows: it can reduce one label, float upward and ensure that users know what to input when entering.

pointer-events

The pointer-events property sets how the HTML element responds to mouse/touch/click/click events and whether the cursor is visible. Although there are 11 possible values for the pointer-Events attribute, eight of them are for SVG. The three valid values for any HTMl element are:

  • noneBlocks all click, state, and cursor options on the specified HTML element
  • autoThe default function
  • inheritWill use thepointer-eventsThe value of the parent element of the element

pointer-events:auto; Penetrate the elements!

Allows the click or click action to “pass through” an element to another element below it on the Z-axis.

The sample

<p> I am the text below, you double-click to try. </p> <div class="events-none">Copy the code

When you double click, the text below can be selected.

Floating label

Above we learned the use of pointer-events. Then get back to the point and achieve the effect in the preface.

Implementing the Login box

    <div class="login-form">
      <h2>The login</h2>
      <form>
        <div class="login-info">
          <input type="text" name="" required=""/>
          <label>Please enter a user name</label>
        </div>
        <div class="login-info">
          <input type="password" name="" required="" />
          <label>Please enter your password</label>
        </div>
      </form>
    </div>

Copy the code

Modify the style. Set login-info to position: relative and set the label position so that it is in the input box.

At this point we haven’t added position-events: None;

  .login-form {
        position: absolute;
        width: 400px;
        padding: 40px;
        background: #fff;
        box-sizing: border-box;
        box-shadow: 0 15px 25px rgba(160.149.149.0.432);
        border-radius: 10px;
      }

      .login-form h2 {
        margin: 0 0 30px;
        padding: 0;
        color:# 000;
        text-align: center;
      }

      .login-form .login-info {
        position: relative;
      }

      .login-form .login-info input {
        width: 100%;
        padding: 10px 10px;
        font-size: 16px;
        color: # 000;
        margin-bottom: 30px;
        border: none;
        border: 1px solid # 000;
        outline: none;
        background: transparent;
      }
      .login-form .login-info label {
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px 10px;
        font-size: 16px;
        color: rgb(15.20.25);;
        transition: 0.5 s;
      }
Copy the code

Add the input: Focus effect

 .login-form .login-info input:focus  ~ label {
    top: -20px;
    left: 0;
    color: rgb(29.155.240);
    font-size: 12px;
    z-index: 1;
  }
  .login-form .login-info input:focus{
    border: 1px solid rgb(29.155.240);
  }
Copy the code

But there is a bug. When you click to enter a user name, nothing happens; the label floats only when you click on the space behind it.

pointer-events:none;

Set pointer-events:none on label, through.

 .login-form .login-info label {
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px 10px;
        font-size: 16px;
        color: rgb(15.20.25);;
pointer-events: none; 
        transition: 0.5 s;
      }
Copy the code

The end result: