The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<form class="form" onsubmit="return false">
  <div class="field">
    <input id="name" type="text" placeholder=" " autocomplete="name" />
    <label for="name">Full name</label>
  </div>
  <div class="field">
    <input id="email" type="email" placeholder=" " autocomplete="email" required />
    <label for="email">Email address</label>
  </div>
  <button type="submit">Continue</button>
</form>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create floating-label form inputs using only HTML and CSS.

Requirements:
- A small white form card with two fields (Full name, Email address) and a full-width indigo pill "Continue" button.
- Each field is a relatively positioned wrapper containing an <input> followed by its <label> (the label must come after the input in the HTML). Give each input placeholder=" " (a single space).
- Input: 22px top padding and 8px bottom padding to leave room for the floated label, 1.5px #d5d9e6 border, 12px radius, no default outline.
- Label: absolutely positioned, vertically centred inside the input, grey, pointer-events: none.
- When the input is focused OR not showing its placeholder (input:focus + label, input:not(:placeholder-shown) + label), move the label to top: 14px, shrink it to 0.75rem and colour it indigo #2506ad, with a 0.2s transition.
- Focus state on the input: indigo border and a 4px translucent indigo ring.
- Show a red border and label only when the field has content and is :invalid.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Put the label after the input in the HTML so you can target it with the adjacent sibling selector (+).

2. 2

   Give the input a placeholder containing a single space. This makes :placeholder-shown true only while the field is empty.

3. 3

   Position the label over the input and add extra top padding to the input for the floated position.

4. 4

   Float the label on two conditions: the input is focused, or :not(:placeholder-shown) (it has a value).

5. 5

   Replace the default outline with a clear border colour and focus ring; never remove focus styling without a replacement.

6. 6

   Combine :not(:placeholder-shown) with :invalid so errors appear only after the user has typed.

Customisation tips

• Keep a real label element; placeholder text alone is not an accessible label.
• Use autocomplete attributes so browsers can fill the form.
• For server-side errors, add an aria-describedby message below the field.

More components