caret-color - Propriété CSS
Résumé des caractéristiques de la propriété caret-color
auto
| currentcolor
| transparent
auto
caret-color
passe progressivement d'une valeur à une autre.Description.
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é.
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.
Syntaxes pour caret-color
.
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é).
fct()
est une des nombreuses fonctions de couleurs connues de CSS : rgb()
, hsl()
, etc.
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 CSS pour plus de précisions.
- 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 CSS pour la liste complète de ces fonctions. - caret-color:
initial
; caret-color:inherit
; caret-color:revert
; caret-color:revert-layer
; caret-color:unset
;La valeur initiale est :
.auto
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à.
Manipulation de la propriété caret-color
par programme.
L'élément bleu ci-dessous est une zone de saisie de type text
. Si son curseur n'est pas visible, pensez à cliquer dedans
pour rendre active cette zone de saisie.
Modifier la valeur de caret-color
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).
function setCaretColor(el) {
el.style['caret-color']='red';
// ou
el.style.caretColor='red';
}
Lire en Javascript la valeur de caret-color
.
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.
function getCaretColor(el) {
alert(el.style['caret-color']);
// ou
alert(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)
.
function getCalcCaretColor(el) {
alert(window.getComputedStyle(el).getPropertyValue('caret-color'));
}
Modifier la valeur de la propriété caret-color
avec JQuery.
function setCaretColor(el) {
$(el).css('caret-color','green');
// ou
$(el).css('caretColor','green');
}
Lire la valeur calculée de la propriété caret-color
avec JQuery.
function getCalcCaretColor(el) {
alert($(el).css('caret-color'));
// ou
alert($(el).css('caretColor'));
}
Exemple interactif.
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.
Prise en charge de la propriété caret-color
.
caret-color
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que caret-color
.
Les spécifications CSS éditées par le W3C sont organisées en modules. caret-color
fait partie du Module CSS - Interface utilisateur de base (CSS Basic User Interface Module ). Les définitions suivantes sont également décrites dans ce même module.