DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die CSS-Pseudoklasse :focus wird verwendet, um ein Element zu stylen, das gerade mit der Tastatur anvisiert oder mit der Maus aktiviert wird. Hier ist ein Beispiel
textarea:focus {
background: pink;
}Jedes Element (am häufigsten <input>s und <textarea>s) befindet sich im „Fokus“, wenn es ausgewählt und bereit ist, Text einzugeben (z. B. wenn ein Cursor blinkt). Mausbenutzer können darauf klicken (oder auf ihr zugehöriges label), um den Fokus zu erhalten, und Tastaturnutzer können mit TAB hineinwechseln.
„Tabbing“
Ein weiterer Anwendungsfall der Pseudoklasse :focus ist das „Tabbing“ durch Elemente. Viele Browser haben einen Standard-Fokus-Zustand für die Tab-Auswahl, der eine gepunktete Umrandung darstellt. Es ist ziemlich einfach zu entfernen, aber stellen Sie sicher, dass Sie sie durch eine geeignete Alternative ersetzen, wenn Sie dies tun.
<a>s, <button>s, <input>s und textareas haben alle standardmäßig den :focus-Zustand, aber Sie können jedem Element in HTML einen Fokus-Zustand geben. Sowohl die Attribute contenteditable als auch tabindex funktionieren dafür, wie in diesem Beispiel
Weitere Ressourcen
- CSS2 Spezifikation
- Selektoren Level 3
- Selektoren Level 4
- MDN
- Entfernen der gepunkteten Umrandung auf CSS-Tricks
- Mehr über
contenteditable - Mehr über
tabindex
Verwandt
Die `:focus-within` Pseudoklasse
:focus-within
form:focus-within { background: lightyellow; }
`:focus-visible` und Rückwärtskompatibilität
Browser-Unterstützung
Alle Browser unterstützen die grundlegende Verwendung von :focus.
Test
Ich möchte das focus-Ereignis mit Inline-CSS im input-Tag verwenden
was ist der Nutzen von :focus?
Der :focus-Selektor wird verwendet, um das Element auszuwählen, das den Fokus hat.
Der :focus-Selektor ist für Elemente zulässig, die Tastaturereignisse oder andere Benutzereingaben akzeptieren.
Hier ist ein Beispiel.
focus wird verwendet, um die Hintergrundfarbe zu ändern (z. B. für Eingabefelder im Fokus).
ja
Hallo Kedar,
:focus führt die CSS aus, die wir für den jeweiligen Elementtyp geschrieben haben, und dadurch können wir die CSS-Codierungen darin schreiben. So müssen wir die CSS-Eigenschaft nicht immer wieder überall schreiben.
Zum Beispiel,
input[type=text]:focus{
background-color:#ff0000;
}
Wenn Sie dieses CSS auf Ihrer Seite schreiben, wird die Hintergrundfarbe eines Eingabefeldes vom Typ Text rot, wenn wir es fokussieren. Dieses :focus bindet automatisch das onfocus-Ereignis intern...
Danke dafür, Kumpel! Hat bei mir gut funktioniert :)
Ist es möglich, :focus auf zwei Elemente anzuwenden?
Ist es möglich, dass Ihr Cursor sich gleichzeitig an zwei Stellen befindet? :focus soll Ihrem Benutzer Feedback darüber geben, wo Dinge auf dem Bildschirm passieren werden, wenn er tippt oder Auswahl-Tasten verwendet usw. Die einzige Möglichkeit, den Fokus-Zustand zu erhalten, ist, den Cursor auf das Element zu bewegen. Aber selbst wenn Sie denselben visuellen Zustand auf zwei oder mehr Elemente anwenden könnten, wenn eines davon den Fokus erhält, warum zum Teufel würden Sie das tun? Wenn zwei Elemente auf dieselbe Weise hervorgehoben werden (oder umrandet), wo wird die Aktion stattfinden? Denken Sie daran, dass nur Text (und ähnliches) Eingaben und Textbereiche eine sekundäre Anzeige haben, und es ist nicht immer einfach, den blinkenden Cursor auf der Seite zu sehen. Verwenden Sie :focus, um dem Benutzer klar mitzuteilen, was den Fokus hat, nicht als Seitenstatus-Gimmick.
Ja
Ich habe tatsächlich einen Anwendungsfall, bei dem dies benötigt wird. Wir haben eine Anwendung, bei der ein Benutzer ein Bild mit handgeschriebenem Text auf der linken Seite des Bildschirms betrachtet, eine Box zeichnet und eintippt, was in der Box steht (wie der Name einer Person); und dann erscheint dieser Name in einem Namensfeld im „strukturierten Daten“-Bereich auf der rechten Seite. Während er auf der linken Seite tippt, aktualisiert er sich auf der rechten Seite. Das funktioniert gut. Wir wünschen uns, dass es wie ein Textbearbeitungsfeld aussieht, das gleichzeitig auf beiden Feldern „Fokus“ hat, damit der Benutzer überall nachschauen kann und das Gefühl hat, dass es in Ordnung ist, dort zu bearbeiten. Beide würden synchron bleiben. Es ist nur ein Komfort für den Benutzer, dort zu bearbeiten, wo er gerade hinschaut/denkt.
Sehr gute Infos, Bro!
:focus Wenn wir diese Eigenschaft verwenden, dann wird beim Fokussieren, das heißt beim Klicken auf den jeweiligen Button oder Tag, die spezifische CSS-Klasse für das Fokussierungsereignis ausgewählt, wie im folgenden Beispiel erwähnt.
:focus {
background: #ddd;
border: 1px solid #000;
}
Ich frage, was ist mit focus out? Ist es möglich, focusOut zu targeten?
mit CSS. Ich werde es vielleicht in Bootstrap verwenden, wenn ich Hilfe von euch bekomme.
Ich frage, was ist mit focus out? Ist es möglich, focusOut zu targeten?
mit CSS. Ich werde es vielleicht in Bootstrap verwenden, wenn ich Hilfe von euch bekomme.
.input:focus { background: pink; color:#000;}
Wie entferne ich die Hintergrundfarbe, wenn ich im Fokus bin?
button:focusscheint in Firefox oder Safari unter Mac OSX sowie in Safari iOS nicht zu funktionieren. Das sind genug Benutzer, um diesen wirkungslos zu machen.Ich habe
:focusals Technik für Dropdown-Menüs verwendetHTML
CSS
Das Attribut
tabindexaktiviert den Fokus, und die Eigenschaftoutlineentfernt die visuelle Anzeige.Sollte von IE8 aufwärts funktionieren.
Ich möchte einen bestimmten Bereich als Textarea fokussieren, wenn ich auf einen anderen Button klicke. (Der Cursor soll in der Textarea blinken, wenn ich auf den jeweiligen Button klicke)
Autofocus funktioniert gut, aber nur einmal beim Seitenaufruf. Ich möchte bei jedem Klick auf einen bestimmten Button den Fokus setzen (Cursor in der Textarea blinken).
Wenn es wirklich ein Button ist, nein, das geht nicht ohne JavaScript.
Wenn Sie ein
labelfür dietextareaerstellen, dann ist das genau das, was es tun soll. Daslabelund dietextareamüssen nicht nebeneinander liegen, solange Sie dertextareaeinid-Attribut geben und dasfor-Attribut im `label` verwenden.Mit CSS können Sie das
labelso aussehen lassen, wie Sie möchten, einschließlich des Erscheinungsbilds eines Buttons.Ich habe Mark nicht verstanden. Können Sie bitte ein Beispiel erklären? Wenn Sie sagen, dass JavaScript für einen Button benötigt wird, schreiben Sie dann bitte dieses JavaScript. Erklären Sie auch, wie es mit einem Label möglich ist. Geben Sie bitte für jedes geeignete Beispiel an.
Das
labelsoll zu diesem Zweck wie ein Button fungieren. Sie können es wie folgt verwendenAlternativ können Sie anstelle des obigen Labels (oder zusätzlich dazu) Folgendes hinzufügen
Bekommen ich Bonuspunkte dafür?
Danke, Mark, Bro
Haben Sie eine Lösung für das gleiche Problem mit Angularjs? Das wäre für mich die beste Option.
Ist es möglich, Input zusammen mit Focus und nicht mit einem Selektor zu verwenden?
Ich möchte den Fokus-Selektor auf alle Eingabeelemente außer einem anwenden.
Können wir etwas wie
input:focus(:not(.phone)){
}
Ich glaube, Abhishek hat das oben gefragt, aber ich habe keine Antwort gesehen. Wenn ich etwas fokussiere und dann rückwärts gehe, wie kann ich es „zurücksetzen“, damit es nicht fokussiert bleibt?
In iOS Safari kann ich nicht zwei Divs nacheinander fokussieren. Das erste Element bleibt fokussiert, wenn auf das zweite geklickt wird. Gibt es dafür eine Umgehungslösung?
hi
Tatsächlich, wenn wir Login- und Signup-Buttons nebeneinander haben und auf den Login-Button klicken, sollte die Hintergrundfarbe des Signup-Buttons verschwinden und umgekehrt, wenn wir auf den Login-Button klicken, sollte die Hintergrundfarbe des Signup-Buttons verschwinden /// Senden Sie mir den Code so schnell wie möglich
Hallo, ich suche nach einer Möglichkeit, wie die Hintergrundfarbe eines Buttons gleich bleibt, auch wenn ich woanders auf dem Bildschirm klicke.
Ich setze eine Farbe für den Button mit button:active und sie verschwindet, sobald ich woanders hinklicke. Ich habe ein paar Buttons, bei denen ich diese Eigenschaft setzen muss. Ist das mit CSS machbar?
Vielen Dank,
V
https://stackoverflow.com/questions/46643441/how-do-i-change-a-menu-image-opacity-when-a-menu-item-is-active
Der obige Link ist eine Frage, die ich heute auf Stackoverflow gestellt habe. Die gegebene Lösung hat Probleme. Können Sie meine Kommentare darunter prüfen, um Hilfe zu erhalten, bitte.
Wie fügt man Fokus zu einem <img-Tag innerhalb eines <a href-Tags hinzu?
input:focus{
outline-color: rgb(0,114,198,0.7) !important;
outline-width: 0.1px !important;
-moz-outline-color: rgb(0,114,198,0.7) !important;
-moz-outline-width:0.1px !important;}
funktioniert nicht in Mozilla Firefox. Was soll ich tun?