Caret-color - Propriété CSS

caret-color

Résumé des caractéristiques de la propriété `caret-color`

Description rapide

Choisit la couleur du marqueur de texte (curseur clignotant).

Statut

Standard

Utilisable sur

HTML

Valeurs prédéfinies

auto | currentcolor | transparent

Pourcentages

Ne s'appliquent pas.

Valeur initiale

auto

Héritée par défaut

Oui.

Type d'animation

Computed value : lors d'une animation, la propriété caret-color passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Interface utilisateur de base

Références (W3C)

🡇

🡅

CSS Basic User Interface Module Level 4

Statut du document: WD (document de travail)

CSS Basic User Interface Module Level 3

Statut du document: REC (recommandation)

Schéma de la syntaxe de `caret-color`.

Schéma syntaxique de la propriété caret-color.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description des termes utilisés sur le schéma :

#xxxxxx est le code hexadécimal d'une couleur.
name est le nom d'une couleur. Plus d'une centaine de couleurs ont reçu un nom standardisé. Voir Nuancier.
color est une couleur définie par l'une des nombreuses fonctions de couleurs connues de CSS : rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

Description de la propriété `caret-color`.

Définit la couleur du marqueur de texte. Il s'agit bien du marqueur clignotant qui apparaît lorsqu'on a cliqué dans une zone de saisie. Le curseur associé à la souris n'est pas impacté par cette propriété.

Curseur souris et marqueur de texte

La couleur du marqueur est bien sûr plus visible lorsque ce dernier à la forme du pavé, et non pas d'un simple trait vertical clignotant. Pour changer la forme du marqueur, voir la propriété caret-shape.

Le marqueur de texte ne s'affiche pas lorsque du texte est sélectionné, et la couleur de la sélection n'est pas la même que celle du marqueur.

Valeurs pour `caret-color`.

caret-color: auto;

Valeur par défaut. Le navigateur détermine la couleur du curseur de texte. La plupart du temps cette valeur est équivalente à currentColor.
caret-color: currentColor;

Le curseur est affiché dans la même couleur que le texte.
caret-color: transparent;

Le curseur est invisible.
caret-color: #00AA00;

La couleur du curseur de texte est définie par son code hexadécimal, sur 3, 6, ou 8 digits. Voyez la page sur Les couleurs pour plus de précisions.
caret-color: lavender;

La couleur du curseur de texte est définie par son nom. Voir Nuancier.
caret-color: hsl(h, s, l);

La couleur du curseur de texte est définie par l'une des nombreuses fonctions réservées à cet effet : hsl(), rgb(), etc. Voyez la page sur Les couleurs pour la liste complète de ces fonctions.
caret-color: initial; (auto) caret-color: inherit; caret-color: revert; caret-color: revertLayer; caret-color: unset;

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de `caret-color`.

Comme toutes les propriétés qui prennent une couleur comme valeur, caret-color peut être animée de façon progressive, d'une couleur à une autre. Pensez bien à cliquer dans la zone de saisie ci-dessous pour faire apparaître le marqueur de texte. Le fait que ce dernier soit clignotant rend difficile la perception de l'animation, mais elle est bien là.

Accéder à la propriété `caret-color` par programme.

Modifier la couleur du curseur en Javascript.

Deux exemples de code pour modifier la valeur de caret-color vous sont donnés ci-dessous . Le premier utilise la notation kebab-case pour le nom de la propriété (un tiret pour séparer les mots), et le deuxième est écrit avec une notation du type camel-case (une majuscule pour séparer les mots).


	let el = document.getElementById('id');
	el.style['caret-color'] = 'red';
	// ou
	let el = document.getElementById('id');
	el.style.caretColor = 'red';

Lire en Javascript la couleur du curseur.

Le code donné ci-dessous est le symétrique du précédent : il récupère la valeur de caret-color lorsque celle-ci a été initialisée via l'attribut style de l'élément. Les valeurs attribuées via un sélecteur CSS ne sont pas prises en compte par ce code. Reportez-vous pour ça à l'exemple suivant.


	let el = document.getElementById('id');
	let value = el.style['caret-color'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.caretColor;

Lire la valeur calculée de `caret-color` en Javascript.

La valeur calculée est celle qui résulte de la résolution des conflits entre la(les) valeur(s) affectée(s) à l'élément via des sélecteurs CSS, les valeurs héritées éventuelles. A défaut, la valeur calculée est la valeur initiale de la propriété. La plupart du temps, il n'y a pas de conflit, et la valeur calculée est simplement la valeur affectée à la propriété pour l'élément.

Dans le cas de caret-color, la couleur est retournée sous la forme rgb(r,g,b), ou, si l'opacité de la couleur n'est pas totale, sous la forme rgba(r,g,b,a).


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('caret-color');

Modifier la valeur de la propriété `caret-color` avec JQuery.

Comme en Javascript, il existe deux syntaxes.


 $('#id').css('caret-color', 'red');
 // ou
 $('#id').css('caretColor', 'red');

Lire la valeur calculée de la propriété `caret-color` avec JQuery.


	let value = $('#id').css('caret-color');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété caret-color et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de caret-color. On constate que les couleurs sont toujours retournées sous la forme rgb() ou éventuellement rgba() quelque soit la façon dont elles ont été affectées.

Exemple interactif avec la propriété `caret-color`.

Choisissez une couleur avec le simulateur ci-dessous et cliquez dans la zone de test. Le marqueur de texte est un trait très fin et clignotant. Certaines couleurs le rendent difficiles à voir.

caret-color :

auto

currentcolor

transparent

Test :

Compatibilité des navigateurs avec `caret-color`.

Colonne 1

Support par les navigateurs de la propriété caret-color pour définir la couleur du curseur de texte qui apparait dans les zones éditables.

Propriété
caret-color

Estimation de la prise en charge globale.

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Chrome

Safari

Firefox

Safari sur IOS

Edge

Chrome pour Androïd

Samsung Internet

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `caret-color`.

Module CSS - Interface utilisateur de base - Niveau 3

La possibilité de choisir la couleur du curseur de texte est ajoutée, avec la propriété caret-color.

02 Août 2002
Document de travail.
07 Juillet 2015
Candidat à la recommandation.
14 Décembre 2017
Proposé à la recommandation.
21 Juin 2018
Recommandation.
Module CSS - Interface utilisateur de base - Niveau 4

Pas de modification concernant le propriété caret-color.
La propriété résumée caret est ajoutée.

22 Septembre 2015
Document de travail.

Voir aussi, au sujet de l'interface utilisateur.

Les possibilités de personnalisation ou de stylisation de l'interface utilisateur (UI) sont décrites dans la spécification CSS Basic User Interface Module du W3C.