diff --git a/snippets/focus-within.md b/snippets/focus-within.md index e69de29bb..1226ed6d9 100644 --- a/snippets/focus-within.md +++ b/snippets/focus-within.md @@ -0,0 +1,51 @@ +### Focus Within + +The psuedo class `:focus-within` gives focus to a parent element like a `form` element when `input` elements receive focus. + +#### HTML + +```html +
+ + +
+ + +
+ +``` + +#### CSS + +```css +form { + border: 3px solid #2d98da; + color: #000000; + padding: 4px; +} + +form:focus-within { + background: #f7b731; + color: #000000; +} + +``` + +#### Demo + + + +#### Explanation + + + +#### Browser support + +⚠️ Not supported in IE11 or the current version of Edge. + + + +- https://caniuse.com/#feat=css-focus-within + +