Ähnlich wie Twitter Mitte 2012.
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}Siehe den Pen Leuchtende blaue Eingabefelder von Chris Coyier (@chriscoyier) auf CodePen
Großartig, aber ich habe mich gefragt, was „tabindex=1“ im HTML bedeutet? Ich schätze, es hat etwas mit der Tabulator-Taste zu tun, aber ich konnte nichts dazu finden.
Tabindex definiert die Position (0 – 32767), die das Element in der Tabulatorreihenfolge der Seite hat – dies wäre wahrscheinlich für Benutzer von Bildschirmleseprogrammen gedacht.
Wenn kein Fehler vorliegt, wird tabindex verwendet, um die Tastaturnavigation über die Tabulatortaste zu steuern.
tabindex=”1″ bedeutet, dass es das erste Element ist, das bei Drücken der Tabulatortaste den Fokus erhält. Dann gelangen Sie zum nächsten Element im Fluss oder zu tabindex=”2″, falls vorhanden.
Ich persönlich verwende tabindex nicht, da der normale Fluss dies impliziert, aber wenn Sie eine knifflige Navigation haben, z. B. zwei Reihen von Eingabefeldern (nur so als Beispiel), dann möchten Sie vielleicht, dass der Fokus zuerst auf das untere Element springt oder so.
Ich schätze, der einzige Fall, in dem ich tabindex verwende, ist bei einem nicht angezeigten Eingabefeld, das zur Erkennung von Spam-Bots dient: Ich setze es auf tabindex=”-1″, um ein seltsames Verhalten zu verhindern.
Übrigens, Chris, wirklich schöne leuchtende Fokusstile. ;)
Dies dient der manuellen Festlegung der Reihenfolge Ihrer Formularelemente. Browser und Bildschirmleseprogramme ordnen sie automatisch nach der Reihenfolge im Quellcode an. Die Angabe von tabindex überschreibt dieses Verhalten der Tabulatorreihenfolge.
Tabindex ist ein wichtiges Feature für die Barrierefreiheit und sollte nicht vermieden werden. Keine Beleidigung. Wenn Sie tabindex in Betracht ziehen, sind die besten Implementierungen mit tabindex=”0″ und tabindex=”-1″. Der Wert 0 stellt sicher, dass Ihr Tabbing-Verhalten dem DOM-Fluss folgt, sodass nichts Seltsames zu befürchten ist. -1 vermeidet Tastatur-Tabbing und behält gleichzeitig seine Fähigkeit bei, den Fokus zu erhalten, wie es bei der Maus der Fall wäre.
Ich möchte auch erwähnen, dass diejenigen unter Ihnen, die ein Formular einrichten müssen, auf die Reihenfolge von tabindex (von einigen als Fokusverwaltung bezeichnet) achten sollten, da dies sicherstellen kann, dass Ihre Benutzer nicht frustriert sind, wenn sie versuchen, durch die Benutzeroberfläche zu tabben. Typischerweise sollten Sie in diesem Formular keine Bestellsysteme verwenden, daher würde ich von tabindex=”1″ abraten und mich darauf konzentrieren, sicherzustellen, dass der DOM-Fluss einem tabindex=”0″-Ansatz entspricht.
Das Leuchten ist übrigens ziemlich gut. Nicht zu übertrieben, wie einige Beispiele, die ich gesehen habe.
Tab index ist nützlich, wenn Formulare bearbeitet werden. Wenn alle Eingabefelder denselben Index haben, wird das nächste Feld fokussiert, standardmäßig ist dies in HTML vorhanden. Verwenden Sie dies also nur, wenn Sie es benötigen.
:) :) :) :)
Hallo Chris,
Ich liebe es, die `box-shadow`- und `transition`-Eigenschaften zu verwenden, um diesen Effekt zu erzielen.
Bei `