Forma de acento circunflexo - CSS-Tricks

Anonim

A caret-shapepropriedade em CSS altera a forma do cursor de texto dentro de elementos editáveis ​​que indicam que um usuário está digitando. Faz parte do Módulo CSS Basic User Interfaces Nível 4, que atualmente está no status Working Draft.

Conforme escrevo, o circunflexo é a pequena barra piscante que segue cada caractere que digito.

Podemos usar caret-shapepara alterar essa barra para outra coisa como, digamos, um bloco:

.element ( caret-shape: block; )

Isso produzirá um acento circunflexo mais parecido com o que você verá ao digitar na linha de comando:

Sintaxe

caret-shape: auto | bar | block | underscore
  • Valor inicial: auto
  • Aplica-se a: elementos que aceitam entrada
  • Herdado: sim
  • Porcentagens: n / a
  • Valor calculado: palavra-chave especificada
  • Tipo de animação: por valor calculado

Valores

caret-shape: auto; caret-shape: bar; caret-shape: block; caret-shape: underscore;

Não temos muito suporte de navegador caret-shapeno momento (veja abaixo), mas aqui está uma renderização desses valores.

caret-shape: bar;
caret-shape: block;
caret-shape: underscore;

Suporte de navegador

Parece que não há dados disponíveis no Caniuse, mas com alguns testes rápidos, aqui está o que encontrei:

IE Beira Raposa de fogo cromada Safári Ópera
Não Não Não Não Não Todo
Android Chrome Android Firefox Navegador Android iOS Safari Opera Mobile
Não Não Não Não Não

Podemos “fingir” isso

Embora o suporte ao navegador seja o que é, podemos na verdade replicar o efeito com outra mágica CSS.

Esse é o tipo de coisa usada nesta animação de máquina de escrever:

Mais Informações

  • Módulo de interface de usuário básico CSS nível 4 (rascunho de trabalho)

Propriedades relacionadas

Almanaque em 27 de janeiro de 2021

acento circunflexo

.element ( caret: #ff7a18 underscore; ) Chris Coyier