So gestalten Sie CSS, um den Fokus zu verlieren

CSS verliert den Fokus

Im Webdesign ist es oft notwendig, einige Stile hinzuzufügen, um das Benutzerinteraktionserlebnis zu verbessern. CSS ist ein sehr leistungsfähiges Tool, mit dem wir eine Vielzahl von Effekten und Animationen erzielen können. In CSS gibt es einen Zustand namens „Fokuszustand“ (:focus), der angibt, dass der Benutzer gerade mit dem Element interagiert und das Element „fokussiert“ ist. Wenn Sie ein Element mit der Maus oder der Tastatur eingeben, erhält das Element den Fokus, und wenn Sie das Element verlassen, verliert es den Fokus. Wie gestaltet man also CSS, das den Fokus verliert?

1. Gängige Stile für verlorenen Fokus

1. Fügen Sie im Fokusstatus dem Element einen Rahmen hinzu. Wenn das Element den Fokus verliert, geben Sie diesem Rahmen die gleiche Farbe wie die Hintergrundfarbe des Elements oder machen Sie ihn heller, um anzuzeigen, dass das Element den Fokus verloren hat.

Zum Beispiel können wir dem Eingabeelement den folgenden CSS-Stil hinzufügen:

input:focus {
    outline: none;
    border: 2px solid #555;
}

input {
    outline: none;
    border: 2px solid #ccc;
}

Hier verwenden wir die Umriss- und Rahmeneigenschaften von CSS, um dies zu erreichen. Wenn das Eingabeelement nicht fokussiert ist, ist sein Rand grau; wenn das Eingabeelement fokussiert ist, wird sein Rand schwarz.

Hier ist zu beachten, dass wir „outline:none“ verwenden, um den gepunkteten Rahmen im Standardfokuszustand aufzuheben, da es sonst zu visuellen Störungen kommt.

2. Hintergrundfarbe

Wenn das Element den Fokus erhält, legen Sie eine Hintergrundfarbe dafür fest. Wenn das Element den Fokus verliert, stellen Sie die Hintergrundfarbe wieder auf ihre ursprüngliche Farbe ein.

Wenn der Benutzer beispielsweise Inhalte in das Eingabefeld eingibt, kann die Hintergrundfarbe des Eingabefelds geändert werden. Wenn der Benutzer das Formular absendet, kann die Hintergrundfarbe des Eingabefelds wiederhergestellt werden.

input:focus {
    background-color: #fff;
}

input {
    background-color: #f6f6f6;
}

3. Schriftfarbe

Wenn das Element den Fokus erhält, stellen Sie eine andere Farbe für seinen Text ein. Wenn das Element den Fokus verliert, stellen Sie die Textfarbe wieder auf die ursprüngliche Farbe ein.

Zum Beispiel können wir dem Eingabeelement den folgenden CSS-Stil hinzufügen:

input:focus {
    color: #333;
}

input {
    color: #666;
}

Wenn das Eingabeelement fokussiert ist, ändert sich seine Textfarbe in Schwarz; wenn das Eingabeelement den Fokus verliert, ändert sich die Textfarbe wieder in original grau.

2. Verwenden Sie Pseudoklassen, um unscharfe Stile zu implementieren.

Einige gängige unscharfe Stile werden oben erwähnt. Tatsächlich werden diese Stile alle durch CSS-Pseudoklassen implementiert. CSS-Pseudoklassen beziehen sich auf einen speziellen Satz von Selektoren, die nicht das Element selbst, sondern bestimmte Zustände des Elements auswählen. Beispielsweise können wir den :focus-Selektor verwenden, um den Fokusstatus eines Elements zu formatieren, und den :hover-Selektor, um den Hover-Status eines Elements zu formatieren.

Da Pseudoklassen unterschiedliche Stile für unterschiedliche Zustände eines Elements festlegen können, eignen sie sich sehr gut für die Implementierung von Stilen mit verlorenem Fokus. Im Folgenden sind einige gängige Pseudoklassen und ihre Verwendung aufgeführt:

1 :focus

Dieser Pseudoklassenselektor wird verwendet, um das aktuell fokussierte Element auszuwählen. Wenn der Benutzer klickt oder die Tabulatortaste drückt, um ein Element einzugeben, wird das Element im Fokus sein und somit den :focus-Stil auslösen.

Zum Beispiel können wir dem Eingabeelement den folgenden CSS-Stil hinzufügen:

input:focus {
    outline: none;
    border: 2px solid #555;
}

input {
    outline: none;
    border: 2px solid #ccc;
}

2, :active

Dieser Pseudoklassenselektor wird verwendet, um das aktuell angeklickte Element auszuwählen. Wenn der Benutzer mit der Maus auf ein Element klickt, wird das Element aktiv und löst den :active-Stil aus.

Zum Beispiel können wir der Schaltfläche den folgenden CSS-Stil hinzufügen:

button:active {
    background-color: #f00;
}

button {
    background-color: #ccc;
}

Wenn der Benutzer auf die Schaltfläche klickt, wird die Hintergrundfarbe der Schaltfläche rot.

3. :visited

Dieser Pseudoklassenselektor wird verwendet, um Elemente besuchter Links auszuwählen. Wenn der Benutzer auf einen Link klickt, wird der Link als „besucht“ gekennzeichnet, wodurch der Stil „:visited“ ausgelöst wird.

Zum Beispiel können wir dem besuchten Link den folgenden CSS-Stil hinzufügen:

a:visited {
    color: #999;
}

Wenn der Benutzer diesen Link besucht, ändert sich die Farbe des Links in Grau.

3. Zusammenfassung

Der Fokuszustand von CSS ist ein sehr nützlicher Zustand und wird häufig im Webdesign verwendet. Durch das Hinzufügen von Fokusstatusstilen zu Elementen können Benutzer intuitiver erkennen, mit welchen Elementen sie gerade interagieren, und so das Interaktionserlebnis verbessern. Unabhängig davon, ob es sich um eine Rahmenfarbe, eine Hintergrundfarbe oder eine Textfarbe handelt, kann das Design mit Fokusverluststil durch den CSS-Pseudoklassenselektor erreicht werden. Wenn Sie diese Fähigkeiten beherrschen, können Sie meiner Meinung nach Ihr Webdesign noch besser machen.

Das obige ist der detaillierte Inhalt vonSo gestalten Sie CSS, um den Fokus zu verlieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!