Caret - Astuces CSS | CSS Almanach 2025

careten CSS est une propriété abrégée qui combine les propriétés caret-coloret caret-shapeen une seule déclaration. Donc, nous arrivons à écrire ceci:

.element ( caret: #ff7a18 underscore; )

… Ce qui revient à écrire ceci:

.element ( caret-color: #ff7a18; caret-shape: underscore; )

C'est un bon raccourci lorsque vous souhaitez modifier la couleur et la forme d'un curseur. Et qu'est-ce qu'un caret, demandez-vous? Vous êtes probablement le plus habitué à en voir un lors de la saisie dans un élément modifiable, comme une entrée de texte ou une zone de texte. Je tape cet article dans WordPress, qui est essentiellement un champ de formulaire géant, et c'est le signe d'insertion que je vois clignoter:

Ainsi, en définissant le caret-colorto, say #ff7a18et le caret-shapesur quelque chose comme underscore, nous pourrions nous attendre à voir quelque chose comme ceci:

Syntaxe

caret: ||

La syntaxe peut prendre une valeur ou une autre… ou les deux! Si une valeur est vide, alors sa valeur initiale est utilisée, qui est autopour les deux propriétés constitutives.

Initiale: auto
S'applique à: éléments qui acceptent l'entrée
Héritée: oui
Pourcentages: n / a
Valeur calculée: voir les propriétés individuelles
Type d'animation: non animable

Valeurs

caret: #ff7a18 underscore; caret: yellow block; caret: hsla(50, 100%, 50%, 0.75) bar; /* Keyword color values */ caret: auto; caret: transparent block; caret: currentcolor underscore; /* Global values */ caret: inherit; caret: initial; caret: unset;

Prise en charge du navigateur

Aucun pour le moment. La propriété est initialement définie dans la spécification CSS Basic User Interface Module Level 4, qui se trouve actuellement dans le brouillon de l'éditeur. Cela signifie qu'il y a encore de la place pour des modifications à effectuer d'ici à ce que cela devienne une recommandation à mettre en œuvre pour les navigateurs.

En attendant, nous pouvons trier une "fausse" caretpropriété avec une autre magie CSS.