CSS uses the placeholder-shown pseudo-class to achieve the floating text effect of the input box

In this post, we’ll use the :placeholder-shown pseudo-class to create a floating question mark effect using pure CSS.

Floating text label

When we deal with input boxes, we will try our best to provide users with a better experience. There are two tag attributes that we often use:

The label tag is the most suitable element to provide descriptive information associated with the form element.
The placeholder attribute of an input box allows you to specify the text that appears inside the <input> element when no input is entered. It is used to show sample text, not explanations or tips.
These two label properties can be combined to create a "floating text label" effect, which specifically refers to:

First, the user sees an input tag with a placeholder attribute that displays some sample questions. The label element is hidden by default.
When the input box is activated and you start typing, the label element will float above the input box.
When there is text in the input box, the label element will always be displayed above the input box to indicate the content entered by the user.

Pure CSS to achieve floating label text

Register the focus event, determine whether the input has a value, hide an element, and decide whether to display the element based on whether there is content in the input box. This sounds like a job for JavaScript, right? not really! Because there is a CSS pseudo-class: placeholder-shown that can achieve the above effect. MDN explains this pseudo-class as follows:

The :placeholder-shown CSS pseudo-class displays placeholder text on an <input> or <textarea> element.

In other words, if there is any value in the input box, we can assume that the :placeholder-shown pseudo-class will not be triggered.

Here is how I use this pseudo-class to implement floating labels:

Construct the HTML code, select the label tag corresponding to the input element through the adjacent sibling selector, and wrap the two elements in a div.
Sets the style of the input, label and ::placeholder pseudo-elements.
Position the label element at the start and vertically center it within the div, then hide it.
The combination of the :not, :focus and :placeholder-shown pseudo-classes determines when to display the label tag: if the placeholder text disappears, the label is displayed — input:not(:placeholder-shown) + label; if the input box gets the focus and the placeholder text is not displayed, the label is displayed — input:focus:not(:placeholder-shown) + label

Let's follow the above ideas to complete the HTML and CSS.

HTML & CSS

The structure of the HTML is actually very simple, it looks like this:

<div class="Input">
  <input type="text" id="input" class="Input-text" placeholder="Your first name, eg Nicholas">
  <label for="input" class="Input-label">First name</label>
</div>

CSS code:

.Input {
  /**
   * The relative positioning of the container is important, because the float position of the label element is calculated relative to it*/
  position: relative;
}
.Input-text {
  /**
   * Set the style of the input box. Font size and line height are very important to determine the exact positioning of the label */
  display: block;
  margin: 0;
  width: 100%;
  /**
   * These properties are set once in the example using custom properties:
   *
   * padding
   * font-size
   * line-height
   */
}
.Input-text:focus {
  /**
   * The style of the input box when it gets the focus */
}
.Input-label {
  /**
   * The label element is set to absolute positioning, and its position and movement distance are calculated based on the parent element and the input box*/
  display: block;
  position: absolute;
  opacity: 0;
  /**
   * These properties are set once in the example using custom properties:
   *
   * bottom
   * left
   * font-size
   * line-height
   * transform
   * transform-origin
   * transition
   */
}
.Input-text:placeholder-shown + .Input-label {
  /**
   * When the placeholder text is visible, the label will be hidden
   */
  visibility: hidden;
  z-index: -1;
}
.Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label {
  /**
   * When the placeholder disappears, for example when you are typing, the label element will appear and float above the input box*/
  visibility: visible;
  z-index: 1;
  opacity: 1;
  /**
   * These properties will be set once in the example using custom properties*
   * transform
   * transition
   */
}

Complete demonstration effect

You can see the complete HTML and CSS code in the demo link below:

Effect Link

Browser support

Browser support is pretty good so far, except for Edge.

Summarize

The above is what I introduced to you about using the placeholder-shown pseudo-class in CSS to achieve the floating text effect in the input box. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time!