Wie erreicht man Fokusstile, die nur über die Tastatur erfolgen, ohne die visuelle Ästhetik zu beeinträchtigen?

Fokusstile nur über die Tastatur erreichen

Sie möchten :focus deaktivieren, wenn dies nicht erforderlich ist, da dies ästhetisch im Widerspruch zum aktiven Zustand steht. Sie möchten jedoch die Fokusstile für Tastaturbenutzer beibehalten. Hier ist ein umfassender Ansatz, um dieses Problem anzugehen:

Die :focus-visible-Lösung

Erwägen Sie die Verwendung von :focus-visible, einer Pseudoklasse, die den Fokus anzeigt, wenn dies von Vorteil ist Benutzer, beispielsweise während der Tastaturinteraktion. Moderne Browser unterstützen jetzt diese Pseudoklasse.

Mit :focus-visible können Sie Fokusstile bedingt anwenden:

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

Browserkompatibilität

Browser ohne :focus-visible-Unterstützung zeigen möglicherweise weiterhin Standardfokusringe an. Um ein konsistentes Verhalten sicherzustellen, verwenden Sie eine Fallback-Strategie:

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

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

Fokusstile nur für die Tastatur

Für eine Lösung für den Fokusstil nur für die Tastatur sollten Sie diesen Ansatz in Betracht ziehen:

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

Diese Methode verwendet ein inneres Element () innerhalb jeder Schaltfläche/Link/usw. und legt den Tabindex für dieses innere Element fest. Fokusstile werden nur auf das innere Element angewendet, um sicherzustellen, dass sie nur im Tastaturfokus angezeigt werden.

Das obige ist der detaillierte Inhalt vonWie erreicht man Fokusstile, die nur über die Tastatur erfolgen, ohne die visuelle Ästhetik zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!