githubEdit

PostCSS Focus Visible

NPM Versionarrow-up-right CSS Standard Statusarrow-up-right Build Statusarrow-up-right Support Chatarrow-up-right

PostCSS Focus Visiblearrow-up-right lets you use the :focus-visible pseudo-class in CSS, following the Selectors Level 4 specificationarrow-up-right.

It is the companion to the focus-visible polyfillarrow-up-right.

:focus:not(:focus-visible) {
  outline: none;
}

/* becomes */

:focus:not(.focus-visible) {
  outline: none;
}

:focus:not(:focus-visible) {
  outline: none;
}

PostCSS Focus Visiblearrow-up-right duplicates rules using the :focus-visible pseudo-class with a .focus-visible class selector, the same selector used by the focus-visible polyfillarrow-up-right. This replacement selector can be changed using the replaceWith option. Also, the preservation of the original :focus-visible rule can be disabled using the preserve option.

Usage

Add PostCSS Focus Visiblearrow-up-right to your project:

Use PostCSS Focus Visiblearrow-up-right to process your CSS:

Or use it as a PostCSSarrow-up-right plugin:

PostCSS Focus Visiblearrow-up-right runs in all Node environments, with special instructions for:

Options

preserve

The preserve option defines whether the original selector should remain. By default, the original selector is preserved.

replaceWith

The replaceWith option defines the selector to replace :focus-visible. By default, the replacement selector is .focus-visible.

Last updated