fieldset legend's border knockout behavior for any elements - 100% CSS, no JavaScript.
The limiting feature support required to use this utility is timeline-scope.
Container style queries are also required.
Reasonable fallback behavior is included for browsers that do not support these features.
$ npm install fieldset-legend
Then include /node_modules/fieldset-legend/fieldset-legend.css
From html:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/fieldset-legend@1/fieldset-legend.css">@import url(https://unpkg.com/fieldset-legend@1/fieldset-legend.css);A full write up and several demos are available here:
https://dev.to/janeori/100-css-s-border-knockout-behavior-for-any-element--4b7b
Please do reach out if you need help with any of this, have feature requests, want to share what you've created, or wish to learn more.
| PropJockey.io | CodePen | DEV Blog | GitHub | Mastodon |
|---|---|---|---|---|
 |
 |
 |
 |
 |