DEV Community

Cover image for Input Fields with Floating Label (CSS Only)
Altug Gurkaynak
Altug Gurkaynak

Posted on • Updated on

Input Fields with Floating Label (CSS Only)

#codepen #css #html

I tried to create a better input experience.

  • Before clicking, the placeholders are set.
  • On click, the placeholder turns to a floating label.
  • If the area is filled, border disappears. I used :not(:placeholder-shown) for this.

Nice for a11y and UX (hopefully)

Please share your thoughts: altug.design

Top comments (0)

Read next

ridoy_hasan profile image

Introduction to Tailwind CSS – A Utility-First Framework

Ridoy Hasan -

syed_ammar profile image

Difference between `aria-label` and `aria-labelledby`

Syed Ammar -

aicowboy2020 profile image

A swinging robot (CSS only)

Joel Larson -

kohtet_gintoki profile image

Using Quill Rich Text Editor in the HTML Form element

Ko Htet -