La propiedad CSS caret-color especifica el color del cursor de texto, el indicador visible del punto de inserción en un elemento donde el usuario puede introducir texto u otro contenido.

/* Palabras clave */
caret-color: auto;
color: transparent;
color: currentColor;

/* Valores <color> */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

Nota: Los agentes usuario podrían incluir otras cosas que consideren “cursor de texto.” Por ejemplo, puede haber una “cursor para navegación,” que actúa de forma similar al cursor de texto pero puede ser movido en textos no editables. Por otro lado, la imagen de cursor mostrada cuando se coloca el cursor del ratón sobre texto cuando la propiedad cursor es auto, o sobre un elemento donde la propiedad cursor es textvertical-text, aunque a veces se parezca al cursor de texto, no lo es (es un cursor del ratón). En algunos navegadores que no soportan esta propiedad, el color del cursor de texto no está asociado al color de la fuente.

Valor inicialauto
Applies toall elements
Heredableyes
Mediainteractive
Valor calculadoauto is computed as specified and <color> values are computed as defined for the color property.
Animation typea color
Canonical orderper grammar

Sintaxis

Valores

auto
Los agentes usuarios deberán usar currentcolor, pero podrían ajustar automáticamente el color del cursor para asegurar la correcta visibilidad y contraste con el contenido alrededor, posiblemente con base en currentcolor, el fondo, sombras, etc.

Nota: Aunque los agentes usuarios puedan usar currentcolor (que usualmente es animable) para el valor auto, auto no es interpolado en las transiciones/animaciones.

<color>
Color del cursor de texto.

Sintaxis formal

auto | <color>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Ejemplo

HTML

<input />

CSS

input {
  caret-color: red;
}

Resultado

Especificaciones

Especificación Estatus Comentarios
CSS Basic User Interface Module Level 3
La definición de 'caret-color' en esta especificación.
Recommendation Initial definition.

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 57

Edge 38.1

53.0 (53.0)

Internet Explorer 11 

44

Sin soporte 

system caret

Característica Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico 57 57 53.0 (53.0) Sin soporte

font color

44 Sin soporte

system caret

Etiquetas y colaboradores del documento

Colaboradores en esta página: israel-munoz
Última actualización por: israel-munoz,