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.
caret-shape: bar;
caret-shape: block;
caret-shape: underscore;
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 2021signo de intercalación
.element ( caret: #ff7a18 underscore; ) 
Chris Coyier
