Propriedade Caret Color
Última atualização: 2026-09-13
caret-color Propriedade Caret Color
A propriedade caret-color define a cor do cursor — a barra vertical piscante — em elementos editáveis, como inputs e áreas de texto. Personalizar a cor do cursor permite que os elementos de formulário combinem com a paleta da página ou destaquem a posição de entrada atual.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Sim |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
caret-color: auto | <color>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | A cor padrão do cursor |
<color> | Tipo | A cor do cursor |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| caret-color | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： auto é o padrão e geralmente corresponde à cor do texto do elemento; definir uma cor específica a substitui de forma independente.
Dica： caret-color é uma propriedade herdada, portanto você pode defini-la uma vez no elemento pai e os filhos herdam a cor.
❓ Perguntas Frequentes
QQuais formatos de cor a propriedade caret-color suporta em CSS?
ATodos os formatos de cor do CSS: palavras-chave (red, blue), hexadecimais (#3498db), rgb()/rgba(), hsl()/hsla() e valores especiais como currentColor. auto é o padrão, fazendo o cursor seguir a cor do texto do elemento. Também suporta a transição de cor por animação, embora isso raramente seja usado na prática.
QQual é a diferença entre caret-color e cursor em CSS?
Acaret-color define a cor do cursor de texto (a barra vertical piscante) dentro de inputs e áreas de texto — conteúdo editável. cursor define o formato do ponteiro do mouse ao passar sobre um elemento — feedback do dispositivo apontador. Os nomes soam semelhantes, mas os objetos são completamente diferentes: um é o cursor de conteúdo, o outro é o ponteiro do mouse.
QPor que a propriedade caret-color não está tendo efeito no input?
AVerifique se ela está aplicada a um elemento editável (input, textarea ou um elemento contenteditable) — um texto comum não editável não tem cursor. Além disso, em modos de aparência forçada, como temas de alto contraste do sistema, o navegador pode substituir as cores personalizadas. Todos os navegadores principais (Chrome, Firefox, Safari, Edge) a suportam, mas versões mais antigas do Safari têm suporte parcial para algumas sintaxes.
QA propriedade caret-color pode ser aplicada a elementos contenteditable?
ASim. Elementos contenteditable têm um cursor de texto assim como input e textarea, então caret-color também funciona neles — você pode dar a editores de rich text e títulos editáveis uma cor de cursor unificada que se adapte ao seu design system. É uma propriedade herdada: defina-a no contêiner pai e os filhos herdam a cor.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
