En forme de caret - Astuces CSS

Anonim

La caret-shapepropriété en CSS modifie la forme du curseur de texte à l'intérieur des éléments modifiables qui indiquent qu'un utilisateur est en train de taper. Il fait partie du module d'interfaces utilisateur de base CSS niveau 4, qui est actuellement en état de brouillon de travail.

Au moment où j'écris, le curseur est la petite barre clignotante qui suit chaque caractère que je tape.

Nous pouvons utiliser caret-shapepour changer cette barre en quelque chose d'autre comme, par exemple, un bloc:

.element ( caret-shape: block; )

Cela produira un signe d'insertion qui ressemble plus à ce que vous pourriez voir en tapant dans la ligne de commande:

Syntaxe

caret-shape: auto | bar | block | underscore
  • Valeur initiale: auto
  • S'applique à: éléments qui acceptent l'entrée
  • Héritée: oui
  • Pourcentages: n / a
  • Valeur calculée: mot-clé spécifié
  • Type d'animation: par valeur calculée

Valeurs

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

Nous n'avons pas beaucoup de support de navigateur pour caret-shapele moment (voir ci-dessous), mais voici un rendu de ces valeurs.

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

Prise en charge du navigateur

Il ne semble pas que des données soient disponibles dans Caniuse, mais avec quelques tests rapides, voici ce que j'ai trouvé:

C'EST À DIRE Bord Firefox Chrome Safari Opéra
Non Non Non Non Non Tout
Chrome Android Android Firefox Navigateur Android Safari sur iOS Opera Mobile
Non Non Non Non Non

Nous pouvons «simuler» cela

Bien que la prise en charge du navigateur soit ce qu'elle est, nous pouvons en fait reproduire l'effet avec d'autres magies CSS.

C'est le genre de chose qui est utilisé sur cette animation de machine à écrire:

Plus d'information

  • Module d'interface utilisateur de base CSS niveau 4 (version de travail)

Propriétés connexes

Almanach le 27 janv.2021

caret

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