forma de intercalación

La caret-shapepropiedad en CSS cambia la forma del cursor de texto dentro de los elementos editables que indica que un usuario está escribiendo. Es parte del módulo de interfaces de usuario básicas de CSS Nivel 4, que actualmente se encuentra en estado de borrador de trabajo.

Mientras escribe, el símbolo de intercalación es la pequeña barra parpadeante que sigue a cada carácter que escribe.

Podemos usar caret-shapepara cambiar esa barra a otra cosa como, por ejemplo, un bloque:

.element {  caret-shape: block;}

Esto producirá un símbolo de intercalación que se parece más al que podrías ver al escribir en la línea de comando:

Sintaxis

caret-shape: auto | bar | block | underscore

• Valor inicial: auto
• Se aplica a: elementos que aceptan entradas
• Heredado: si
• Porcentajes: n/a
• Valor calculado: palabra clave especificada
• Tipo de animación: por valor calculado

Valores

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

No tenemos mucha compatibilidad con el navegador por caret-shapeel momento (ver más abajo), pero aquí hay una representación de esos valores.

Soporte del navegador

No parece que haya datos disponibles en Caniuse, pero con algunas pruebas rápidas, esto es lo que encontré:

ES DECIR	Borde	Firefox	cromo	Safari	Ópera
No	No	No	No	No	Hacer

androidcromo	Android Firefox	Navegador de Android	Safari en iOS	Ópera móvil
No	No	No	No	No

Podemos “fingir” esto

Si bien la compatibilidad con el navegador es lo que es, podemos replicar el efecto con otras magias de CSS.

Ese es el tipo de cosas que se usan en esta animación de máquina de escribir:

Más información

• Módulo de interfaz de usuario básico CSS Nivel 4 (borrador de trabajo)

Propiedades relacionadas

signo de intercalación

.element { caret: #ff7a18 underscore; } Geoff Graham

color de intercalación

.element { caret-color: red; } Chris Coyier