Username Password Forget?

## What's this?

This pen was created to demonstrate how one way a developer can go about creating a form with some fancy text/password inputs using `:focus-within` and `:has()` *.

The next section contains a rough idea as to how the CSS code would look if :has() were implemented.

* This is an emulation of `:has()` powered by EQCSS .

## CSS Code what-if

This section contains a rough idea as to how the CSS code would look if `:has()` were supported.

    [...] (See CSS Editor, scroll to /* Demo Login Panel */)

    .input_container:focus-within > input,
    .input_container > input:valid {
    	margin-top: 1.2em;
    }
    .input_container:focus-within > span,
    .input_container:focus-within > a,
    .input_container:has(> input:valid) > span,
    .input_container:has(> input:valid) > a {
    	font-size: .8em;
    	opacity: .5;
    }
    .input_container:focus-within > a,
    .input_container:has(> input:valid) > a {
    	opacity: 1;
    	pointer-events: auto;
    }

## Notes & References

Very late into putting this pen together, I realized the pen became a little unnecessary to make as I rewrote a number of lines to use `:focus-within` instead of an emulation of `:has(> input:focus)` . Despite this, the emulated `:has()` rulesets moreorless exist to keep the `.input_container` 's title text and link in place as long as the `input` sibling that's generally sitting next to them isn't empty. Silver lining? It also makes for an awesome demo showcasing what :focus-within ( which is supported outside of Edge) can do.

- Selectors Level 4 - Relational pseudo-class :has() on CSSWG
- CanIUse :has()? (Supported by zero browsers)
- :has() on MDN
- My other :has() pens
- Emulating :has() by Tom Hodgins
- Powered by Element Queries CSS