Acento circunflexo - CSS-Tricks

Índice

caretem CSS é uma propriedade abreviada que combina as propriedades caret-colore caret-shapeem uma única declaração. Então, vamos escrever isso:

.element ( caret: #ff7a18 underscore; )

... o que é semelhante a escrever isto:

.element ( caret-color: #ff7a18; caret-shape: underscore; )

Esse é um bom atalho quando você deseja alterar a cor e a forma de um cursor. E o que é um cursor, você pergunta? Você provavelmente está mais familiarizado com a visualização de um ao digitar em um elemento editável, como uma entrada de texto ou área de texto. Estou digitando esta postagem no WordPress, que é basicamente um campo de formulário gigante, e este é o acento circunflexo que vejo piscando para mim:

Então, definindo caret-colorpara, digamos, #ff7a18e caret-shapepara algo como underscore, podemos esperar ver algo como isto:

Sintaxe

caret: ||

A sintaxe pode assumir um valor ou outro ... ou ambos! Se um valor estiver em branco, então seu valor inicial é usado, que é autopara ambas as propriedades constituintes.

Inicial: auto
Aplica-se a: elementos que aceitam entrada
Herdado: sim
Porcentagens: n / a
Valor calculado: ver propriedades individuais
Tipo de animação: não animável

Valores

caret: #ff7a18 underscore; caret: yellow block; caret: hsla(50, 100%, 50%, 0.75) bar; /* Keyword color values */ caret: auto; caret: transparent block; caret: currentcolor underscore; /* Global values */ caret: inherit; caret: initial; caret: unset;

Suporte de navegador

Nenhum no momento. A propriedade é inicialmente definida na especificação do CSS Basic User Interface Module Nível 4, que está atualmente no Editor's Draft. Isso significa que ainda há espaço para mudanças a serem feitas até quando se torna uma recomendação para os navegadores implementarem.

Enquanto isso, podemos “falsificar” a caretpropriedade com alguma outra mágica CSS.