Introduction to floating labels in css (with case)

This article brings you an introduction to floating labels in CSS (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In the web project, there is a very important module which is the login/registration module. The main part of this module is a form form. This form form contains two important input groups (username/password). Each Each input group contains label and input, and there are various layout plans for label input. Different designers have different design styles, and different front-end engineers have different implementation methods. Through comparison, we found that the current solution focuses on both aesthetics and performance.

So, what are the layout plans for label and input?

Layout plan for label input

1. Replace label and input (palcholder keyword prompt) are divided into upper and lower parts; // Used a long time ago, now occasionally use

2. to divide label and input (palcholder keyword prompt) into left and right parts (The label occupies a certain width, and the fonts in the label adopt three common solutions: left-aligned, right-aligned, and aligned at both ends); // Case: Weibo login, jd wap login page, etc.

3. The label and input (palcholder keyword prompt) are still divided into left and right parts. The difference is that the font in the label is replaced by an icon; // Case: segment fault community login page, etc.

4. Only contains input (palcholder keyword prompt); // Case: Mobile Taobao login page, Nuggets development community login page, etc.

5. Only displays input (palcholder key) word prompt), and the label is floated and hidden. When the focus event of the input is triggered, the label is displayed. // Case: the previous login page of mobile Taobao, or refer to JVFloatLabeledTextField, etc.

These solutions have their own advantages and disadvantages. Using the label font and replacing it with icons is more vivid, but the icon is added URL access; the number of fonts in the label is inconsistent, looks unsightly, and the number of words is the same. This solution can only be said to be satisfactory; directly discarding the label can make the interface simple and beautiful, but the label has the function of a label (will be discussed in detail below) label and placeholder); using floating label increases the animation effect, but requires the introduction of js. The performance of this solution is obviously higher than that of not using js (there is a solution that does not use js, but the compatibility is not very good ).

label vs placholder

label: Describes the role of the form element, used to specify the input is the unique field name

placeholder: It prompts the user to enter The format of the content

They seem to be similar, but their responsibilities are different. Many students have made big mistakes here.

If you need to know more about them, please refer to MDN

Animated label (no-js)

User interaction page At the same time, user interaction with animation is often easier to impress users. The following introduces a floating label implemented using pseudo classes.

HTML code:

<div>
    <input>
    <label>账号</label>
</div>

Basic layout css code:

.input-group {
    position: relative;
    margin: 100px 20px;
    font-size: 16px;
}

.input-group>input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 16px;
    font-size: 16px;
    line-height: 1.0;
    border: none;
    border-bottom: 1px solid #cdcdcd;
    border-radius: 0.4em;

    transition: box-shadow 0.3s;
}

.input-group input::placeholder {
  color: #cdcdcd;
}

.input-group>input:focus {
    outline: none;
    box-shadow: 0.2em 0.8em 1.6em #cdcdcd;
}

.input-group>label {
    position: absolute;
    bottom: 50%;
    left: 0;
    z-index: -1;
    
    visibility: hidden;
    color: #050505;
    opacity: 0;
}

First, set the position of the label (posiion: absolute) and define its level (z- index: -1), visibility: hidden, transparency (opacity: 0);

Then, the placeholder style of the input is set, and the pseudo element::placeholder can be used to set its style;

Finally, a transition animation effect is set. When the input element label gains focus, the pseudo-class:focus is used to define the shadow style (box-shadow) and outline style (outline) when the input element label gains focus.

label floating effect style

 .input-group>label {
      ...

      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: translate3d(0, 0, 0) scale(0);
              transform: translate3d(0, 0, 0) scale(0);
      -webkit-transition:
          opacity 0.3s,
          visibility 0.3s,
          transform 0.3s,
          z-index 0.3s;
          
              transition:
                  opacity 0.3s,
                  visibility 0.3s,
                  transform 0.3s,
                  z-index 0.3s;
 }

.input-group>input:focus ~ label {
    z-index: 1;
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(0, -36px, 0) scale(1);
        transform: translate3d(0, -36px, 0) scale(1);
}

In the collection that defines the label style, add its initial transform deformation effect, set the transition transition effect style, and then define when the input gets focus, its Just use the style of the sibling element label.

The effect of this label floating is different from that of JVFloatLabeledTextField. The former gets focus and the label starts to float immediately, while the latter starts when the user inputs content (that is, when the placeholder disappears).

To make the two have the same effect, we can use the feature that pseudo classes can be nested and modify .input-group>input:focus ~ label to .input-group>input:focus:not(:placeholder -shown) ~ label, here: placeholder-shown can define the visible and hidden effect of the placeholder, but its compatibility is not very good, ie/edge does not support it at all, chrome, safari, and Firefox can. Case: demo

The above is the detailed content of Introduction to floating labels in css (with case). For more information, please follow other related articles on the PHP Chinese website!