Propiedad CSS caret-color
caret-color es una propiedad CSS que especifica el color del cursor de inserción. Aprende su uso con ejemplos prácticos.
La propiedad CSS caret-color establece el color del cursor de inserción — la delgada línea vertical parpadeante que indica dónde aparecerá el texto escrito dentro de un campo de texto o cualquier elemento editable. Por defecto, el cursor coincide con el color de texto del agente de usuario (generalmente negro). Con caret-color puedes cambiar su color para que coincida con tu marca, mejorar el contraste sobre un fondo de entrada con color, o incluso ocultarlo por completo.
El cursor de inserción es únicamente un indicador de escritura. No es lo mismo que el cursor del ratón (controlado por la propiedad cursor) y no afecta al color del resaltado de selección.
Esta página explica qué hace caret-color, dónde se aplica, los valores que acepta y los detalles importantes que conviene conocer antes de usarlo en producción.
| Valor inicial | auto |
|---|---|
| Se aplica a | Elementos que aceptan entrada de texto. |
| Heredada | Sí. |
| Animatable | Sí (como color). |
| Versión | CSS3 |
| Sintaxis DOM | object.style.caretColor = "#1c87c9"; |
Dónde se aplica caret-color
El cursor de inserción aparece donde el usuario puede escribir o posicionar el cursor de edición de texto, por lo que caret-color afecta a:
- Campos
<input>que aceptan texto (text,search,email,url,password,tel,number). - Elementos
<textarea>. - Cualquier elemento con el atributo
contenteditableestablecido entrue.
Como la propiedad es heredada, puedes definirla una sola vez en un contenedor (o en :root) y todos los descendientes editables la adoptarán — muy útil para aplicar un tema a un formulario completo con una sola regla.
Sintaxis
caret-color: auto | <color>;Ejemplo: cursor transparente vs. cursor personalizado
El primer campo usa el cursor predeterminado, el segundo lo oculta con transparent, y el tercero usa un azul personalizado:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.caret-example1 {
caret-color: transparent;
}
.caret-example2 {
caret-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Caret-color property example</h2>
<input value="Default caret color" />
<br />
<br />
<input class="caret-example1" value="Transparent caret color" />
<br />
<br />
<input class="caret-example2" value="Custom caret color" />
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| auto | El navegador elige un color adecuado, normalmente currentColor (el color de texto del elemento). Este es el valor predeterminado. |
<color> | Cualquier color CSS válido: un color con nombre, hexadecimal (#1c87c9), rgb()/rgba(), o hsl()/hsla(). Usa transparent para ocultar el cursor. |
| initial | Restablece la propiedad a su valor predeterminado (auto). |
| inherit | Toma el valor calculado del elemento padre. |
Cualquier formato de color es válido, por lo que las siguientes declaraciones son todas correctas:
caret-color: red; /* named color */
caret-color: #1c87c9; /* hex */
caret-color: rgb(28 135 201);/* rgb */
caret-color: hsl(202 76% 45%);/* hsl */
caret-color: transparent; /* invisible caret */Consulta nombres de colores CSS para ver la lista completa de palabras clave, y la propiedad color para entender cómo se resuelve currentColor.
Aspectos importantes y consejos
autose resuelve acurrentColor. Si solo cambias elcolordel texto, el cursor lo sigue automáticamente — con frecuencia no necesitascaret-colora menos que quieras que el cursor difiera del texto.transparentoculta el cursor sin deshabilitar la edición. El campo sigue aceptando entrada; solo desaparece el indicador parpadeante. Evita esto en formularios reales — un cursor invisible perjudica la usabilidad y la accesibilidad.- No tiene efecto en elementos no editables. Aplicar
caret-colora un<div>sincontenteditable, o a un input deshabilitado o de solo lectura, no tiene ningún efecto porque no se dibuja ningún cursor allí. - Cuida el contraste. Un cursor que se confunde con un fondo de entrada oscuro puede ser difícil de localizar. Elige un color que destaque, igual que harías con el contraste de texto.
- Es animatable. Como el valor es un color, puedes hacer una transición — por ejemplo, desvaneciendo el cursor a un color resaltado cuando un input recibe el foco.
input {
caret-color: #999;
transition: caret-color 0.2s ease;
}
input:focus {
caret-color: #1c87c9;
}Compatibilidad con navegadores
caret-color es compatible con todos los navegadores modernos (Chrome, Edge, Firefox, Safari y Opera). Degrada de forma elegante: los navegadores que no la reconocen simplemente muestran el cursor predeterminado, por lo que no hay ningún riesgo en usarla sin un fallback.
Propiedades relacionadas
color— color del texto, y la fuente decurrentColora la que recurrecaret-color: auto.outline-color— color del contorno de foco que suele mostrarse junto a un input activo.opacity— atenúa un elemento, incluido su cursor de inserción.