How to Achieve Keyboard-Only Focus Styles Without Affecting Visual Aesthetics?

Achieving Keyboard-Only Focus Styles

You aim to disable :focus when unnecessary, as it aesthetically conflicts with the active state. However, you wish to retain focus styles for keyboard users. Here's a comprehensive approach to address this:

The :focus-visible Solution

Consider using :focus-visible, a pseudo-class that indicates focus when beneficial to the user, such as during keyboard interaction. Modern browsers now support this pseudo-class.

Using :focus-visible, you can apply focus styles conditionally:

<code class="css">button:focus-visible {
  /* remove default focus style */
  outline: none;
  /* custom focus styles */
  box-shadow: 0 0 2px 2px #51a7e8;
  color: lime;
}</code>

Browser Compatibility

Browsers without :focus-visible support may still display default focus rings. To ensure consistent behavior, use a fallback strategy:

<code class="css">button:focus {
  outline: none;
  background: #ffdd00; /* gold */
}

button:focus:not(:focus-visible) {
  background: white; /* undo gold */
}</code>

Keyboard-Only Focus Styles

For a keyboard-only focus style solution, consider using this approach:

<code class="css">button {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  font-size: inherit;
}

.btn {
  all: initial;
  margin: 1em;
  display: inline-block; 
}

.btn__content {
  background: orange;
  padding: 1em;
  cursor: pointer;
  display: inline-block;
}


/* Fixing the Safari bug for `<button>`s overflow */
.btn__content {
    position: relative;
}

/* All the states on the inner element */
.btn:hover > .btn__content  {
    background: salmon;
}

.btn:active > .btn__content  {
    background: darkorange;
}

.btn:focus > .btn__content  {
    box-shadow: 0 0 2px 2px #51a7e8;
    color: lime;
}

/* Removing default outline only after we've added our custom one */
.btn:focus,
.btn__content:focus {
    outline: none;
}</code>

This method employs an inner element () within each button/link/etc. and sets the tabindex for this inner element. Focus styles are applied only to the inner element, ensuring they appear only on keyboard focus.

The above is the detailed content of How to Achieve Keyboard-Only Focus Styles Without Affecting Visual Aesthetics?. For more information, please follow other related articles on the PHP Chinese website!