Translator: Jelly CC


Original address:
Callmenick.com/dev/floated…

In this article, we will create a floating problem tag effect using the :placeholder-shown pseudo-class, implemented using pure CSS.

Floating text labels

When we work with input fields, we try to provide a better experience for the user. There are two tag attributes that we often use:

  1. Label Is an associated form element that provides the most appropriate descriptive information.
  2. The placeholder property of the input box allows you to specify the text that appears inside the element when there is no input. It is used to display sample text, not to explain or hint.

These two tag attributes can be combined to create the effect of a “floating text tag”, which specifically refers to:

  1. First, the user sees an input tag with placeholder attributes, showing some sample problems. The label element is hidden by default.
  2. When the input field is activated and input begins, the Label element floats above the input field.
  3. When there is text in the input box, the label element remains above the input box to indicate what the user has entered.

Pure CSS implements floating tag text

Register the Focus event to determine if the input has a value, hide an element, and decide whether to display the element based on whether the input box has content. This sounds like a JavaScript job, right? Not really! There is a CSS pseudo class named placeholder-shown that can achieve the above effect. This pseudo-class is explained in MDN like this:

Placeholder-shown CSS pseudo-classes in the <input> or <textarea> placeholder text


When to take effect.

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’s how I used this pseudo-class to implement a floating tag:

  1. Build HTML code that selects the label tag for the input element using a neighboring sibling selector and wraps the two elements in a div.
  2. Set input, label, and ::placeholder placeholder styles.
  3. Place the Label element in the starting position and center it vertically in the div, then hide it.
  4. A :not, :focus, and :placeholder-shown pseudo-class determines when to display the label: ■ label — input:not(:placeholder-shown) + label; ■ Label — INPUT :focus:not(:placeholder-shown) + label — input:focus:not(:placeholder-shown) + label

Here’s how to complete HTML and CSS.

HTML & CSS

The structure of HTML is actually quite simple, like this:

<div class="Input">
  <input type="text" id="input" class="Input-text" placeholder="Your first name, e.g. Nicholas">
  <label for="input" class="Input-label">First name</label>
</div>Copy the code

The CSS code:

.Input {
  /** * The relative positioning of the container is important because the float position of the label element is relative to the */ it evaluates to
  position: relative;
}

.Input-text {
  /** * Sets the input box style. Font size and line height are important to determine the precise positioning of labels */
  display: block;
  margin: 0;
  width: 100%;
  /** * These attributes are set once in the example as custom attributes: ** padding * font-size * line-height */
}

.Input-text:focus {
  /** * The style of the input box to get 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 input field */
  display: block;
  position: absolute;
  opacity: 0;
  /** * These attributes are set once in the example by way of custom attributes:  * * bottom * left * font-size * line-height * transform * transform-origin * transition */
}

.Input-text:placeholder-shown + .Input-label {
  /** * Hides label */ when placeholder text is visible
  visibility: hidden;
  z-index: -1;
}

.Input-text:not(:placeholder-shown) + .Input-label..Input-text:focus:not(:placeholder-shown) + .Input-label {
  /** * The label element is displayed and floats above the input box */ when the placeholder disappears, such as when typing content
  visibility: visible;
  z-index: 1;
  opacity: 1;
  /** * These properties are set once in the example as a custom property ** transform * transition */
}Copy the code

Full demo effect

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

Effect of link

Browser support

Browser support is good so far, except for Edge.

conclusion

I hope you learned something from this article, and you can come up with some interesting new ways to use placeholder pseudo-classes. Thanks again for reading!