Σχήμα καρέ - CSS-Κόλπα

Η caret-shapeιδιότητα στο CSS αλλάζει το σχήμα του δρομέα κειμένου μέσα σε επεξεργάσιμα στοιχεία που υποδηλώνει ότι ένας χρήστης πληκτρολογεί. Είναι μέρος του CSS Basic User Interfaces Module Level 4, το οποίο βρίσκεται σε κατάσταση προσχέδιο εργασίας.

Καθώς γράφω, το caret είναι η μικρή μπάρα που αναβοσβήνει που ακολουθεί κάθε χαρακτήρα που πληκτρολογώ.

Μπορούμε να χρησιμοποιήσουμε caret-shapeγια να αλλάξουμε αυτήν τη γραμμή σε κάτι άλλο, ας πούμε, ένα μπλοκ:

.element ( caret-shape: block; )

Αυτό θα δημιουργήσει ένα μοτίβο που μοιάζει περισσότερο με αυτό που μπορεί να δείτε κατά την πληκτρολόγηση στη γραμμή εντολών:

Σύνταξη

caret-shape: auto | bar | block | underscore

• Αρχική τιμή: auto
• Ισχύει για: στοιχεία που δέχονται εισαγωγή
• Κληρονομικό: ναι
• Ποσοστά: n / a
• Υπολογισμένη τιμή: καθορισμένη λέξη-κλειδί
• Τύπος κινούμενης εικόνας: με υπολογισμένη τιμή

Αξίες

caret-shape: auto; caret-shape: bar; caret-shape: block; caret-shape: underscore;

Προς caret-shapeτο παρόν δεν έχουμε πολλή υποστήριξη προγράμματος περιήγησης (δείτε παρακάτω), αλλά εδώ είναι μια απόδοση αυτών των τιμών.

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

Δεν φαίνεται να υπάρχουν διαθέσιμα δεδομένα στο Caniuse, αλλά με κάποιες γρήγορες δοκιμές, εδώ βρήκα:

ΙΕ	Ακρη	Firefox	Χρώμιο	Σαφάρι	ΛΥΡΙΚΗ ΣΚΗΝΗ
Οχι	Οχι	Οχι	Οχι	Οχι	Ολα

Android Chrome	Android Firefox	Πρόγραμμα περιήγησης Android	iOS Safari	Opera Mobile
Οχι	Οχι	Οχι	Οχι	Οχι

Μπορούμε να «ψεύσουμε» αυτό

Ενώ η υποστήριξη του προγράμματος περιήγησης είναι αυτό που είναι, μπορούμε πραγματικά να αναπαράγουμε το αποτέλεσμα με άλλα μαγικά CSS.

Αυτό είναι το είδος των πραγμάτων που χρησιμοποιούνται σε αυτήν την κινούμενη γραφομηχανή:

Περισσότερες πληροφορίες

• CSS Basic User Interface Module Level 4 (Προσχέδιο εργασίας)

Σχετικές ιδιότητες

Almanac στις 27 Ιανουαρίου 2021

αγκύλη

.element ( caret: #ff7a18 underscore; ) Chris Coyier