DEV Community

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

Posted on • Edited on

2

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

bobcars profile image

Open Source Funding Success Stories: A Path to Sustainable Innovation

Bob Cars(on) -

rachellovestowrite profile image

Supporting the Builders: Open Source Developer Sponsorship

Rachel Duncan -

ashucommits profile image

Navigating Open Source Developer Compensation: A Journey Through Collaborative Code

ashu-commits -

mikeyoung44 profile image

New AI Method Makes Language Models Smarter Through Adversarial Context Training

Mike Young -

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay