如何在不影响视觉美观的情况下实现纯键盘对焦风格？

实现仅键盘焦点样式

您的目标是在不必要时禁用 :focus，因为它在美观上与活动状态冲突。但是，您希望为键盘用户保留焦点样式。这里有一个解决这个问题的综合方法：

:focus-visible 解决方案

考虑使用 :focus-visible，一个伪类，它在有益于用户，例如在键盘交互期间。现代浏览器现在支持这个伪类。

使用 :focus-visible，您可以有条件地应用焦点样式：

<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>

浏览器兼容性

不支持 :focus-visible 的浏览器可能仍会显示默认对焦环。为了确保行为一致，请使用后备策略：

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

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

仅键盘焦点样式

对于仅键盘焦点样式解决方案，请考虑使用以下方法：

<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;
}</button></code>

此方法在每个按钮/链接/等中使用内部元素（）。并设置该内部元素的 tabindex。焦点样式仅应用于内部元素，确保它们仅出现在键盘焦点上。

以上是如何在不影响视觉美观的情况下实现纯键盘对焦风格？的详细内容。更多信息请关注PHP中文网其他相关文章！