Using Anchor positioning for floating labels

2025-06-07

Tags:

Anchoring the position of a label to the corresponding label can now be done with this new CSS feature.

Since the new CSS anchor positioning feature is part of Interop 2025, I guess it will be available in Firefox and Safari soon. I thought about usecases and one that came to my mind is the floating labels pattern. You may have seen that the label of a form input moves up and get's smaller when you start typing. This pattern is called floating label. Usually this is done with translate in combination with the :placeholder-shown pseudo-class.

<label for="name-input">Name</label>
<input id="name-input" name="name" placeholder=" ">

input{
    padding: 0.25em 0.5em;
    anchor-name: --input-anchor;
}

label{
    position: absolute;
    
    /* position the top of the label to the center of the input */
    top: anchor(--input-anchor center);

    translate: 0.15rem -50%;
    transition: 0.2s ease-out;
    transition-property: top, font-size, background-color;
    padding-inline: 0.4rem;
    background-color: transparent;
}

/* when the label is followed by an input that is not empty */
label:has(+ input:not(:placeholder-shown)) {
	/* position the top of the label now to the top of the input */
    top: anchor(--input-anchor top);
    
    font-size: 0.7em;
    background: white;
}

The result itself isn't really simpler or better than the solutions available without anchor positioning. It's just a different approach newly available.

As of June 2025, this example doesn't work in current versions of Firefox and Safari.

Name