CSS: Cursor

Con CSS es posible modificar el tipo de cursor (puntero del ratón) que debe mostrarse cuando se encuentre justo encima de un elemento HTML. Es habitual que con el cursor se informe al usuario de la operación que podrá realizar. Para ello se usa la propiedad cursor y puede tener varios tipos de valores.

Por ejemplo, con el valor wait (palabra clave) el puntero toma forma de temporizador, indicando al usuario que debe esperar.

Hay que tener en cuenta que los usuarios están acostumbrados al cursor habitual, por lo que cambiarlo a la ligera puede conducir a una mala experiencia de usuario. Se recomienda modificarlo de forma justificada por uno de los cursores predefinidos del sistema para mejorar la usabilidad.

Valores de uso general

Valores de uso general para la propiedad cursor:

El valor por defecto es auto. Con este valor, el navegador web decide el puntero que debe mostrar en cada ocasión. Por ejemplo, si se coloca sobre un enlace se mostrará una mano con un dedo, indicando que se puede pulsar, y si hay texto se mostrará el cursor de selección, con forma de letra “I” mayúscula.

Con el valor default se fuerza el puntero que tiene forma de flecha cuando esté ubicado sobre un elemento HTML. En cambio, con el valor none se esconde el puntero del ratón, queda invisible sobre el elemento en cuestión.

Pon el cursor encima de los tres textos siguientes. En el primero es automático, por lo que se adaptará según convenga. En el segundo se fuerza el puntero en forma de flecha, y en el tercero es invisible (desaparece).

Cursor automático. El cursor cambia encima del enlace.

Puntero en forma de flecha. No sale el de selección.

Cursor invisible en todo el párrafo (hasta el final de línea).

Cursores para enlaces y estado

Los siguientes cursores son los más utilizados, ya que permiten indicar cuando una zona se puede clicar, cuando hay que esperar o si hay ayuda disponible. Son usados a nivel de sistema, por tanto los usuarios los tienen familiarizados a través de las aplicaciones instaladas y mediante las páginas web.

Es útil usar el valor context-menu para indicar que debajo del cursor hay un menú contextual, que aparece al hacer clic con el botón derecho del ratón.

Con el valor help se indica que el elemento de debajo ofrece información de ayuda para el usuario, que se mostrará al pulsar dicho elemento.

El valor pointer es usado por defecto en los enlaces: el puntero con forma de flecha cambia a una mano con un dedo que señala el enlace.

Usando el valor progress se indica al usuario que el programa está ocupando realizando una operación, sin embargo sigue mostrando un puntero, por lo que todavía se puede interactuar con otros elementos de la interfaz.

En cambio, el valor wait muestra un cronómetro que indica al usuario que debe esperar hasta que el programa termine la operación.

Pasa el cursor por encima de los siguientes párrafos.

Cursor de tipo context-menu.

Cursor de tipo help.

Cursor de tipo pointer.

Cursor de tipo progress.

Cursor de tipo wait.

Cursores de selección

Los cursores de selección también son muy usados, sobre todo cuando se navega a través de Internet. Es habitual seleccionar texto para copiarlo y pegarlo, por ejemplo para citarlo después en otro documento o para guardar anotaciones.

El cursor con el valor cell es muy usado en hojas de cálculo. Tiene forma de cruceta e indica la posibilidad de seleccionar celdas.

El valor crosshair muestra una cruceta más fina, al estilo de los programas de dibujo técnico, para seleccionar una región con precisión.

Con el valor text se fuerza el cursor que tiene forma de letra “I” mayúscula, y es muy habitual. El que no es tan habitual es vertical-text, ya que se debe usar para seleccionar texto que esté dispuesto verticalmente.

Pasa el cursor por encima de los siguientes párrafos.

Cursor de tipo cell.

Cursor de tipo crosshair.

Cursor de tipo text.

Cursor de tipo vertical-text.

Cursores de interacción

Algunos cursores son de interacción, y se utilizan para indicar al usuario la acción que están realizando. En algunos casos también es posible indicar que una acción no puede realizarse cuando el cursor está sobre cierta región.

El cursor con valor alias permite indicar que se está creando un enlace directo. Aparece una mano junto con el símbolo de una cadena.

Los valores copy y move sirven para indicar que algo puede ser copiado o movido. El de copiar tiene aspecto de mano con el símbolo de sumar, mientras que el de mover se representa con flechas hacia todos los lados.

En cambio, el valor no-drop indica que la acción que se intenta realizar no es posible en dicha región, por lo que aparece una mano con un símbolo de prohibido. Con not-allowed aparece el símbolo de prohibición en grande.

Pasa el cursor por encima de los siguientes párrafos.

Cursor de tipo alias.

Cursor de tipo copy.

Cursor de tipo move.

Cursor de tipo no-drop.

Cursor de tipo not-allowed.

Cursores de cambio de tamaño

Los cursores para indicar el cambio de tamaño también son muy usados. Permiten indicar que una ventana del sistema o una caja interactiva puede ser dimensionada hacia una dirección determinada. El cursor cambiará de aspecto dependiendo de la esquina o del vértice a partir del cual se pretende cambiar el tamaño.

En estos cursores se usa un prefijo equivalente a las iniciales de los puntos cardinales, facilitando el trabajo al diseñador. Por ejemplo, se entiende que n-resize dimensiona desde la arista superior, ya que «N» es la inicial de north (norte); de la misma forma se entiende que se-resize dimensiona desde la esquina inferior derecha, ya que «SE» significa south-est (suroeste).

Cursores personalizados

Con CSS también es posible modificar el cursor usando una imagen personalizada. En este caso el valor de la propiedad cursor será la función url() con un parámetro que será una dirección URL válida de la imagen deseada. También se puede indicar la posición y un puntero alternativo por si no carga la imagen indicada.

Los valores de posición se introducen justo después de la URL. Se trata de dos valores numéricos en píxeles, pero no se debe indicar la unidad. Primero se introduce el desplazamiento en el eje horizontal y luego en el eje vertical (X Y), separados por un espacio. Esa es la sintaxis que se debe usar:

selector {
  cursor: url() X Y, puntero;
}

Veamos un ejemplo indicando un cursor de color azul.

Código CSS:

.cursor-azul {
  cursor: url("/images/css/cursor.png") 7 5, pointer;
}

Resultado:

Pasa el cursor por encima del siguiente párrafo.

Cursor personalizado: puntero de color azul.