Uso de cursores con CSS y como personalizarlos

Cambiar el cursor con CSS es una de esas cosas pequeñas que, cuando las descubres, te preguntas cómo no las estabas usando antes. 

A mí me pasó: quería mejorar la experiencia en una interfaz bastante minimalista y empecé a probar cursores distintos. Ahí aprendí dos cosas:

1. No todos los navegadores cargan los mismos cursores,
2. Un cursor mal elegido puede arruinar la experiencia del usuario.

En esta guía te voy a enseñar todo lo que he aprendido usando cursores con CSS: cómo funcionan, cuáles existen, cómo crear los tuyos, qué errores evitar y cómo usarlos sin romper la usabilidad.

Qué es la propiedad cursor y para qué sirve

La propiedad cursor define la apariencia del puntero cuando el usuario pasa sobre un elemento. Es simple: cambias el valor y el cursor cambia su aspecto.

Cuando te pones sobre un input de tipo “text”, aparece la famosa I de edición. Sobre un enlace, aparece la manito. Todo eso lo controla el navegador según el tipo de elemento… pero tú puedes sobreescribirlo.

Cómo funciona y cuándo se aplica

El navegador decide el cursor por defecto, pero tú puedes cambiarlo en cualquier elemento:

button {
 cursor: pointer;
}

¿Tiene hover? ¿Es clicable? Mucho cuidado: cambiar el cursor solo por estética puede confundir al usuario. Yo lo hice al principio y terminé volviendo atrás porque los usuarios no entendían qué podían clicar y qué no.

Errores comunes al usar cursores (y cómo evitarlos)

• Usar cursores que no representan acciones reales
• Poner cursores personalizados enormes (queda lento y torpe)
• No incluir fallback cuando el navegador no soporta la imagen
• Cambiar el cursor en pantallas táctiles (¡no existen ahí!)

Con la propiedad cursor que veremos a continuación podemos cambiar el aspecto del cursor sobre ciertos elementos en nuestra web ; normalmente cuando visitamos un sitio web nuestro cursor toma la forma de una flecha; pero esta cambia al situarlos sobre ciertos elementos por ejemplo un input de tipo "text"; en donde toma la forma de edición de texto normalmente.

Cursores en la web con CSS

El uso de cursores personalizados en una aplicación web puede mejorar la experiencia del usuario final; en esta entrada veremos como usar los cursores provistos por CSS y cursores personalizados.

Para utilizar cursores ya predefinidos debemos de colocar el valor a la propiedad CSS que queramos; mientras que con el cursor personalizado debemos utilizar una imagen como valor, que representará el cursor.

Sintaxis básica de los cursores en CSS

Con CSS podemos establecer el tipo de cursor a utilizar usando la siguiente sintaxis:

/*donde 'cursor' es la propiedad y 'valor' es el valor*/
cursor: valor;

Ejemplo básico de uso del cursor

Como todo en CSS, hay una propiedad:

.texto-editable {
 cursor: text;
}

Aplicación del cursor en elementos específicos

Por ejemplo, podemos cambiar el cursos en elementos HTML especificos que definamos y no de forma global en toda la web:

.card {
 cursor: pointer;
}
.borde {
 cursor: ew-resize;
}

A mí me gusta probar cada cursor en varios navegadores porque algunos, sorprendentemente, no renderizan ciertos tipos. Me ha pasado especialmente con cursores raros tipo context-menu.

Lista completa de cursores en CSS (con descripción y utilidad)

Aquí tenemos algunos ejemplos de cursores ya definidos por el sistema operativo o el navegador; puede que algunos de ellos no carguen; todo dependiendo del sistema operativo o el navegador que utilices; así que mucho cuidado al momento de escoger uno:

• Cursor    Descripción
• default    Flecha estándar
• pointer    Mano indicando clic
• text    I-beam para texto
• wait    Indica que debes esperar
• progress    Cargando en segundo plano
• help    Signo de ayuda
• crosshair    Cruz de precisión
• move    Movimiento en todas direcciones

Cursores para redimensionar elementos

• Cursor    Función
• e-resize    Redimensionar a la derecha
• w-resize    Izquierda
• n-resize    Arriba
• s-resize    Abajo
• ne-resize    Arriba derecha
• nw-resize    Arriba izquierda
• se-resize    Abajo derecha
• sw-resize    Abajo izquierda
• ns-resize    Vertical
• ew-resize    Horizontal
• col-resize    Columnas
• row-resize    Filas

Cursores funcionales y de advertencia

• Cursor    Uso
• not-allowed    Acción bloqueada
• no-drop    No se puede soltar
• copy    Indica copiar
• alias    Alias o acceso alternativo
• none    Sin cursor

Ejemplos de uso:

/*cursores por defecto*/
.alias           { cursor: alias; }
.auto            { cursor: auto; }
.cell            { cursor: cell; }
.copy            { cursor: copy; }
.context-menu    { cursor: context-menu; }
.crosshair       { cursor: crosshair; }
.default         { cursor: default; }
.help            { cursor: help; }
.move            { cursor: move; }
.none            { cursor: none; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.wait            { cursor: wait; }

.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }

.all-scroll      { cursor: all-scroll; }

.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }

.e-resize        { cursor: e-resize; }
.n-resize        { cursor: n-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }

.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

Puedes verlo en la práctica aquí:

Cursores personalizados con CSS

Para establecer nuestros propios cursores (personalizados) basta con indicar la URL de la imagen que representará nuestro cursor; se pueden indicar varias URL para que CSS intente cargar varias imágenes; si la primera imagen del puntero no se carga (no existe el cursor por ejemplo) o no la soporta el navegador, se pasa a la siguiente imagen; veamos un ejemplo:

/*cursores personalizados*/
.pointer-custom { 
  cursor: url(pointer-custom.gif),
  url(pointer-custom.png), pointer 
}
pointer-custom 

Usar url() para cargar tu propio cursor

• Puedes usar PNG, GIF, CUR o incluso SVG en navegadores modernos.
• Algunos navegadores ignoran la primera imagen si no cumple con ciertas dimensiones o formato. Así que siempre uso varias:

.cursor-custom {
  cursor: url("cursor.cur"), 
          url("cursor.png"), 
          pointer;
}

Fallbacks: cómo asegurar que tu cursor siempre funcione

• Primer URL → formato ideal
• Segundo → alternativa para navegadores raros
• Último → cursor estándar

Me ha salvado más de una vez usar fallback, especialmente cuando un PNG no cargaba en Safari.

Formatos recomendados (PNG, SVG, CUR)

• CUR: óptimo para Windows
• PNG: buen balance general
• SVG: super definido, pero no todos los navegadores lo soportan bien como cursor

Tamaños, optimización y calidad del cursor

Esto lo aprendí por las malas:

si la imagen es grande, el movimiento del cursor se siente torpe y lento.

Mantén tamaños de 24×24 o 32×32 píxeles.

Buenas prácticas de UX al elegir un cursor

• Cuándo cambiar el cursor realmente mejora la experiencia
  • Elementos que NO son nativos (cards clicables, divs interactivos)
  • Arrastrar y soltar
  • Elementos gráficos, canvases, sliders
  • Interfaces altamente visuales
• Casos donde NO debes cambiar el cursor
  • Si el usuario está acostumbrado a un cursor estándar, no lo cambies.
  • Ejemplos:

  • enlaces → pointer
    texto → text
    botones → pointer

• Cursores y pantallas táctiles (lo que nadie te dice)
  • En móvil no hay cursor, así que no uses el cursor como indicador de interacción.
  • Mejor combina iconos, sombras o animaciones.

Accesibilidad y diseño: hacer cursores útiles para todos

Qué esperar según el dispositivo del usuario:

• mouse: interacción precisa
• trackpad: precisión media
• táctil: cero cursores
• stylus: comportamiento mixto

Media queries del puntero: pointer y any-pointer

@media (pointer: coarse) {
 /* El usuario usa dedo → nada de cursores */
}

Diferencia entre cursor y caret (caret-color)

El cursor sigue al mouse.

El caret es el indicador donde se escribe en inputs.

input {
 caret-color: red;
}

Ejemplos listos para copiar: cursores CSS para tu proyecto

Botones, enlaces e inputs:

.boton {
 cursor: pointer;
}

Menús, sliders y elementos arrastrables

.drag {
 cursor: grab;
}
.drag:active {
 cursor: grabbing;
}

Cursor personalizado con SVG

.custom-svg {
 cursor: url("cursor.svg") 0 0, pointer;
}

Preguntas frecuentes sobre cursores CSS (FAQ)

• ¿Funcionan los cursores en pantallas táctiles?
  • No. El cursor no existe en pantallas táctiles.
• ¿Por qué mi cursor personalizado no aparece?
  • Puede ser por tamaño, formato o falta de fallback.
• ¿Qué formatos acepta CSS?
  • PNG, GIF, SVG (parcial), CUR.
• ¿Puedo poner un cursor diferente en un div?
  • Sí, el cursor se aplica por selector.
• ¿Qué tamaño debe tener un cursor personalizado?
  • Idealmente 24×24 o 32×32 px.

Conclusiones

En conclusión es una opción más que tenemos para mejorar la experiencia del visitante en nuestra aplicación; pero tenga siempre en cuenta que el cursor a escoger no debería ser demasiado diferente a los ya estándares si deseas que su aplicación sea fácil de usar.

Los cursores en CSS son una herramienta sencilla pero poderosísima para guiar a tus usuarios. Eso sí, como aprendí cuando empecé a experimentar, hay que usarlos con cabeza: buenos fallbacks, formatos compatibles, cursores reconocibles y siempre pensando en la experiencia real del usuario.

Si eliges bien el cursor, tu interfaz se siente más clara, más intuitiva y más profesional.