: εστίαση - CSS-Κόλπα

Anonim

Η :focusψευδοκλάση στο CSS χρησιμοποιείται για το στυλ ενός στοιχείου που στοχεύεται από το πληκτρολόγιο ή ενεργοποιείται από το ποντίκι. Εδώ είναι ένα παράδειγμα:

textarea:focus ( background: pink; )

Οποιοδήποτε στοιχείο (συνηθέστερα s και s) βρίσκεται σε "εστίαση" όταν επιλέγονται και είναι έτοιμα να εισαγάγουν κείμενο (όπως όταν ένας δρομέας αναβοσβήνει). Οι χρήστες του ποντικιού μπορούν να κάνουν κλικ σε αυτούς (ή τους σχετικούς label) για εστίαση και οι χρήστες του πληκτρολογίου μπορούν να TAB σε αυτούς.

"Καρτέλα"

Η χρήση της ψευδοκλάσης :focus«καρτέλα» μέσω στοιχείων. Πολλά προγράμματα περιήγησης έχουν μια προεπιλεγμένη κατάσταση εστίασης για την επιλογή καρτελών, η οποία είναι ένα διάστικτο περίγραμμα. Είναι αρκετά εύκολο να αφαιρεθεί, αλλά φροντίστε να το αντικαταστήσετε με μια κατάλληλη εναλλακτική λύση εάν το κάνετε.

s, s, sκαι textareas όλοι έχουν την :focus κατάσταση από προεπιλογή, αλλά μπορείτε να δώσετε μια κατάσταση εστίαση σε οποιοδήποτε στοιχείο σε μορφή HTML. Και τα δύο contenteditable και τα tabindex χαρακτηριστικά λειτουργούν για αυτό, όπως σε αυτό το παράδειγμα:

Σχετιζομαι με

Άρθρο στις 12 Μαΐου 2017

Η κατηγορία «: focus-inside» Ψευδο

Chris Coyier

Υποστήριξη προγράμματος περιήγησης

Όλα τα προγράμματα περιήγησης υποστηρίζουν τη βασική χρήση του :focus.