README-BROWSER.md

Focus Within for Browsers

Focus Within lets you style elements based on whether they are focused or contain a focused element, following the Selectors Level 4 specification.

.field label {
  /* style a label */
}

.field[focus-within] label {
  /* style a label when its field also contains a focused element */
}

Usage

Add Focus Within to your build tool:

npm install focus-within

Then include and initialize it on your document:

const focusWithin = require('focus-within');

focusWithin(document);

Options

Focus Within accepts a secondary paramater to configure the attribute or class name added to elements matching focused elements or containing focused elements.

focusWithin(document, {
  attr: false,
  className: '.focus-within'
});

Falsey values on either attr or className will disable setting the attribute or class name on elements matching :focus-within.

Focus Within also accepts a secondary paramater to configure whether the polyfill is loaded regardless of support. If force is given a truthy value, then the polyfill will always execute.

focusWithin(document, {
  force: true
});