mensae / floating-placeholder-pattern

An experiment with a form with floating placeholders

A form with floating placeholder pattern

When the user focuses on a field the placeholder moves aside behind the label so the user can still clearly see what input is expected.

This instead of the normal behaviour where the placeholder text is removed as soon as the field gets focus.

This is an attempt to do it in CSS only, so to not rely on a JavaScript that potentially could become unavailable, or turned off by the user. This is very well doable accept I also want to keep the reading sequence intact, for screen readers. So the label should be placed before the input field.

As there is, currently, no possibility to select a previous sibling in CSS, what would be very helpful from point of view from the input element, I instead wrapped both label and field in a div and using the :focus-within pseudo selector. Unfortunately though for the moment it only works well in Firefox, with no support at all in, you guessed it, IE and Edge. See here for more information.

Now how to detect if a user has typed in something in CSS and so make the placeholder text to not appear again. For this I use the :placeholder-shown pseudo selector and the placeholder attribute with no text. This selector is however still experimental and for the browsers where it does work it only works on form fields with input type is text. See more here.

All in all a fun experiment but not for production any time soon.

See a working, well, if you are using Firefox that is, example on codepen.

floating-placeholder-pattern's Issues

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.