Propriedade CSS caret-color
A propriedade CSS caret-color define a cor do cursor de inserção de texto. Veja exemplos de uso desta propriedade.
A propriedade CSS caret-color define a cor do cursor de inserção — a linha vertical fina e piscante que indica onde o texto digitado será inserido em um campo de texto ou em qualquer elemento editável. Por padrão, o cursor corresponde à cor de texto do agente do usuário (geralmente preta). Com caret-color, você pode recolorí-lo para combinar com sua marca, melhorar o contraste em relação a um fundo de entrada colorido, ou ocultá-lo completamente.
O cursor é puramente um indicador de digitação. Ele não é o mesmo que o cursor do mouse (controlado pela propriedade cursor) e não afeta a cor do realce de seleção.
Esta página cobre o que caret-color faz, onde se aplica, seus valores aceitos e os detalhes importantes a saber antes de utilizá-lo em produção.
| Valor Inicial | auto |
|---|---|
| Aplica-se a | Elementos que aceitam entrada de texto. |
| Herdada | Sim. |
| Animável | Sim (como cor). |
| Versão | CSS3 |
| Sintaxe DOM | object.style.caretColor = "#1c87c9"; |
Onde caret-color se aplica
O cursor aparece onde quer que o usuário possa digitar ou posicionar um cursor de edição de texto, portanto caret-color afeta:
- Campos
<input>que aceitam texto (text,search,email,url,password,tel,number). - Elementos
<textarea>. - Qualquer elemento com o atributo
contenteditabledefinido comotrue.
Como a propriedade é herdada, você pode defini-la uma vez em um contêiner (ou no :root) e cada descendente editável a herda — conveniente para tematizar um formulário inteiro com uma única regra.
Sintaxe
caret-color: auto | <color>;Exemplo: cursor transparente vs. cursor personalizado
O primeiro campo mantém o cursor padrão, o segundo oculta o cursor com transparent, e o terceiro usa um 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 | Descrição |
|---|---|
| auto | O navegador escolhe uma cor adequada, tipicamente currentColor (a cor de texto do elemento). Este é o valor padrão. |
<color> | Qualquer cor CSS válida: uma cor nomeada, hex (#1c87c9), rgb()/rgba(), ou hsl()/hsla(). Use transparent para ocultar o cursor. |
| initial | Redefine a propriedade para seu valor padrão (auto). |
| inherit | Usa o valor calculado do elemento pai. |
Qualquer formato de cor funciona, portanto as seguintes declarações são todas válidas:
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 */Consulte nomes de cores CSS para a lista completa de palavras-chave e a propriedade color para entender como currentColor é resolvido.
Detalhes e dicas
autoresolve paracurrentColor. Se você apenas alterar acolordo texto, o cursor a seguirá automaticamente — muitas vezes você não precisa decaret-colora menos que queira que o cursor difira do texto.transparentoculta o cursor sem desativar a edição. O campo ainda aceita entrada; apenas o indicador piscante desaparece. Evite isso em formulários reais — um cursor invisível prejudica a usabilidade e a acessibilidade.- Sem efeito em elementos não editáveis. Definir
caret-colorem um<div>semcontenteditable, ou em um campo desativado/somente leitura, não tem efeito porque nenhum cursor é desenhado ali. - Atenção ao contraste. Um cursor que se mistura com o fundo escuro de um campo de entrada pode ser difícil de localizar. Escolha uma cor que se destaque, assim como você faria para o contraste do texto.
- É animável. Como o valor é uma cor, você pode fazer a transição — por exemplo, alterando a cor do cursor para uma cor de destaque quando um campo recebe foco.
input {
caret-color: #999;
transition: caret-color 0.2s ease;
}
input:focus {
caret-color: #1c87c9;
}Suporte dos navegadores
caret-color é suportado em todos os navegadores modernos (Chrome, Edge, Firefox, Safari e Opera). Degrada de forma elegante: navegadores que não a reconhecem simplesmente exibem o cursor padrão, portanto não há problema em usá-la sem um fallback.
Propriedades relacionadas
color— cor do texto e a fonte decurrentColorpara o qualcaret-color: autoreverte.outline-color— cor do contorno de foco frequentemente exibido junto a um campo ativo.opacity— esmaece um elemento, incluindo seu cursor.