Forma de intercalación - Trucos CSS

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

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

Podemos usar caret-shapepara cambiar esa barra a algo más como, digamos, un bloque:

.element ( caret-shape: block; )

Eso producirá un signo de intercalación que se parece más a lo que podría 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 entrada
• 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 caret-shapeen este momento (ver más abajo), pero aquí hay una representación de esos valores.

Soporte de 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	Todos

Android Chrome	Android Firefox	Navegador de Android	Safari de iOS	Opera Mobile
No	No	No	No	No

Podemos "fingir" esto

Si bien la compatibilidad con el navegador es lo que es, en realidad podemos replicar el efecto con otra magia 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ásica CSS, nivel 4 (borrador de trabajo)

Propiedades relacionadas

Almanaque el 27 de enero de 2021

signo de intercalación

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