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

preface

inCan float placeholder, so that your login is no longer boring!In this article, we introduce how to use pointer-events and :focus to implement floating placeholder. The original article is to write this article, because there is a BUG in that article, when the input box unfocus,

There will be text overlapping effect, but CSS does not provide :unfocus. Many people’s first impression should be to use JS to solve, in fact, there is no need, in the CSS property: :placeholder-shown can be very convenient to solve the BUG.

compatibility

Please note that at the bottom, the instructions are given. In Firefox and IE, it’s best to add the corresponding prefix!!

:placeholder-shown

Placeholder -shown :placeholder-shown :placeholder-shown is a pseudo-class selector used to set the style of the entire element when the input/text-area contains placeholder text.

Used to introduce

input {
  border: 2px solid black;
}
input:placeholder-shown {
  border-color: red;
}
Copy the code

<input type="text" placeholder="Placeholder"/>
<input type="text" />
<input type="text" />
Copy the code

For the same style, the input border with placeholders is red. When there are no placeholders: The input box does not turn red, regardless of whether it already has focus or has input text.

Odd,

  input:placeholder-shown {
      color:red;
      font-size: 10px;
      border-color: red;
      font-style: italic;
}
Copy the code

For :placeholder-shown, he is for input, what do I understand? The above code does not work with placeholders!! So normally for placeholder styles, we should be using ::placeholder elements. But I was really surprised by what I saw. Except for color, all effects are displayed normally.

Now I’m building on the code above. Add: : placeholder

   input::placeholder{
        font-size: 20px;
        font-style: normal;
        color:blue;
      }  
Copy the code

At this point, placeholders are rendered exactly as ::placeholder.

The :: :placeholder attributes apply to the placeholder, which inherits the input style.

Floating placeholders

Design an input box

<div class="login-info">
    <input type="text" name="" required="" placeholder=""/>
    <label>Please enter a user name</label>
</div>
Copy the code

Here please enter the user name is presented by label

.login-form .login-info { position: relative; } .login-form .login-info label { position: absolute; // Adjust the position and place it in the input box}Copy the code

Note: because :placeholder-shown only in effect when there is a placeholder, we give the placeholder a space!!

The molding

Previously we only set :focus, which caused text to overlap. Now use not(:placeholder-shown) to fix this bug.

   .login-form .login-info input:not(:placeholder-shown) ~ label,
      .login-form .login-info input:focus ~ label {
        top: -20px;
        left: 0;
        color: rgb(29, 155, 240);
        font-size: 12px;
        z-index: 1;
      }
Copy the code

When I finish typing, input loses focus and the text does not overlap ！！！！