Whitepage

Before we get started, we have to understand how labels, placeholders, and input fields work and how they are used from a UX perspective.

• Input fields, by default, have outlines when they are in focus.*
• Placeholders are used to show users what information is needed in their respective fields.
• Placeholders are created using the placeholder="" attribute.
• Placeholders, by default, disappear when text fills the input field. This affects the :placeholder-shown pseudo-selector.*
• Labels are used for the same reason as placeholders, but don't disappear when text is in the input field. This is great because it allows users to always see what information is required.
• UX best practices tell us that labels should accompany items in forms (input fields, text areas, checkboxes, etc.).

We'll be using several pseudo-selectors to create this effect.
This is the ONLY way to achieve this effect without any JavaScript.

• :focus — Represents an element (such as a form input) that has received focus.
• :not() — Prevents the items passed into the argument from being selected.
• :placeholder — Represents the placeholder text of input and textarea elements.
• :placeholder-shown — Represents any input or textarea element that is currently displaying placeholder text.

A non-SCSS version can be found here for those that don't use SCSS. Note that this older CodePen has a ROOT font-size of 10px, so any 'rem' values are based on 10px.