Floating Label Input

<div class="floating-field">

  <input
    type="text"
    id="floating-name"
    placeholder=" "
    required
  >

  <label for="floating-name">
    Your Name
  </label>

</div>

.floating-field{
  position:relative;
  width:100%;
  max-width:420px;
}

.floating-field input{
  width:100%;
  padding:15px 16px;

  border:1px solid #263750;
  border-radius:10px;
  outline:none;

  background:#0b1423;
  color:#ffffff;

  font-size:16px;

  transition:.25s ease;
}

.floating-field label{
  position:absolute;
  left:16px;
  top:50%;

  transform:translateY(-50%);

  color:#8491a7;
  font-size:15px;

  pointer-events:none;

  transition:.25s ease;
}

.floating-field input:focus{
  border-color:#22d3ee;

  box-shadow:
    0 0 0 3px rgba(34,211,238,.10);
}

.floating-field input:focus + label,
.floating-field input:not(:placeholder-shown) + label{
  opacity:0;
  visibility:hidden;
}
}

How This Floating Label Input Works

The Floating Label Input pairs a native text field with a label positioned directly inside the input area. When the field receives focus or contains text, CSS hides the label so it no longer overlaps the user’s input. The component works entirely with HTML and CSS and contains no JavaScript.

The HTML uses a .floating-field wrapper containing an <input> followed immediately by its <label>. The input has id="floating-name", while the label uses for="floating-name". This associates the “Your Name” label with the text field.

One small but important detail is placeholder=" ". The placeholder contains a space rather than visible instructional text. This allows CSS to use the :placeholder-shown pseudo-class to determine whether the field is empty.

The input also includes the required attribute. When this component is placed inside a submitted form, the browser can therefore require a value before allowing normal form submission.

The .floating-field wrapper uses position: relative, which provides the positioning reference for the label. It takes up 100% of the available width but stops growing at max-width: 420px.

The input has 15px vertical and 16px horizontal padding, a 1px #263750 border, and 10px rounded corners. Its background is dark #0b1423, entered text is white, and the font size is 16px. The normal browser outline is disabled because the component supplies its own focus treatment.

The label is absolutely positioned 16px from the left and at top: 50%. transform: translateY(-50%) shifts it upward by half of its own height, placing “Your Name” vertically in the center of the field. Its muted #8491a7 color helps distinguish the label from entered text.

The label also has pointer-events: none. This means it does not intercept pointer interaction while visually sitting over the input.

When the input receives focus, its border becomes cyan #22d3ee. A box-shadow of 0 0 0 3px rgba(34,211,238,.10) adds a subtle cyan focus ring. The .25s ease transition smooths these changes.

The label behavior uses two selectors. input:focus + label hides the label whenever the field is active. input:not(:placeholder-shown) + label keeps it hidden when the field has a value and its placeholder is no longer being shown.

In both cases, the label changes to opacity: 0 and visibility: hidden. Because the label has a .25s ease transition, its opacity fades rather than disappearing instantly. For more information about detecting whether an input is displaying its placeholder, see the MDN :placeholder-shown documentation.

Despite the component’s name, the retrieved CSS does not move the label upward into a smaller floating position. Instead, the label begins centered inside the field and fades out when the field is focused or contains text. There is no transform that moves it above the input.

Customizing the Floating Label Input

The component can be adapted by changing its existing dimensions, colors, label positioning, and transition values.

• Change max-width: 420px to control the maximum width of the field.
• Adjust the input’s 15px 16px padding to change its internal spacing and overall height.
• Change the 10px border radius to make the input more square or rounded.
• Replace #0b1423 to customize the input background.
• Change #22d3ee and its RGBA value to customize the focus border and focus ring.
• Edit the label’s left: 16px value to change its horizontal starting position.
• Replace #8491a7 or the 15px font size to adjust the label’s appearance.
• Change “Your Name” and keep the input id and label for association consistent when adapting the field for another type of information.

Where to Use This Floating Label Input

This compact label treatment works well in forms where the field purpose should appear directly inside an otherwise empty input area.

• Registration forms
• Profile editing interfaces
• Contact forms
• Checkout information fields
• Account setup screens
• Landing-page forms
• User information panels

For a complete form containing name, email, message, and submission feedback, the Contact Form is a related CodeRipple component. This standalone input provides its visual label and native required state, but it does not include submission handling or custom validation logic.

Frequently Asked Questions

Does this Floating Label Input use JavaScript?

No. The retrieved component contains no JavaScript. Focus styling and label visibility are handled entirely through CSS pseudo-classes.

Does the label actually float above the input?

No. In this implementation, the label starts vertically centered inside the field and fades out when the input receives focus or contains text. It does not move above the field.

Why does the input have a blank placeholder?

The placeholder=" " value allows CSS to use :placeholder-shown to detect the empty state without displaying normal placeholder text to the user.

What happens after the user enters a name and leaves the field?

The label remains hidden because the input no longer matches :placeholder-shown. If the value is cleared, the label can become visible again after the field loses focus.

This Floating Label Input uses a minimal HTML structure and CSS state selectors to place the label inside an empty field, hide it during interaction, and preserve a clear focused state without JavaScript.