A través de la propiedad CSS cursor podemos personalizar el puntero del ratón según nuestras necesidades. Aunque es cierto que una de las restricciones de CSS es que no nos permite modificar elementos propios del navegador, en algunas ocasiones resulta muy útil mostrar un cursor u otro, para ayudar al usuario a saber qué tipo de acción puede llevar a cacbo.
Con CSS es posible generar los siguientes cursores de ratón, ordenados por orden alfabético. Pon el ratón encima de cada elemento para visualizar el estilo del cursor CSS:
- alias , indica que se puede crear un alias de algo
- all-scroll , indica que el elemento se puede mover hacia cualquier dirección
- auto , el navegador elige el cursor de forma automática
- cell , indica que una o varias celdas se pueden seleccionar
- context-menu , indica que hay un menú contextual disponible
- col-resize , indica que la columna se puede redimensionar horizontalmente
- copy , indica que un elemento se puede copiar
- crosshair , cursor en forma de cruz
- default , el cursor por defecto
- e-resize , indica que el borde se puede mover hacia la derecha (east)
- ew-resize , indica que el borde se puede redimensionar bidireccionalmente
- grab , indica que un elemento es arrastrable
- grabbing , indica que se está arrastrando un elemento
- help , indica que hay ayuda disponible
- move , este cursor indica que un elemento se puede mover
- n-resize , indica que el borde se puede mover hacia arriba (north)
- ne-resize , indica que el borde se puede mover hacia arriba a la derecha (north-east)
- nesw-resize , indica que el elemento se puede redimensionar bidireccionalmente
- ns-resize , indica que el elemento se puede redimensionar bidireccionalmente
- nw-resize , indica que el borde se puede mover hacia arriba a la izquierda (north-west)
- nwse-resize , indica que el elemento se puede redimensionar bidireccionalmente
- no-drop , indica que el elemento que se está arrastrando no se puede soltar aquí
- none , no se muestra ningún cursor
- not-allowed , indica que la acción requerida no se puede llevar a cabo
- pointer , este cursor indica un enlace
- progress , indica que la aplicación está ocupada
- row-resize , indica que una fila se puede redimensionar verticalmente
- s-resize , indica que el borde se puede mover hacia abajo (south)
- se-resize , indica que el borde se puede mover hacia abajo a la derecha (south-east)
- sw-resize , indica que el borde se puede mover hacia abajo a la izquierda (south-west)
- text , indica que hay texto que se puede seleccionar
- w-resize , indica que el borde se puede mover a la izquierda
- wait , indica que hay una tarea en ejecución
- zoom-in , indica que se puede acercar el zoom
- zoom-out , indica que se puede alejar el zoom
Cómo establecer un cursor con CSS
Para conseguir el efecto del cursor de los ejemplos que hemos visto arriba, es necesario utilizar la propiedad «cursor» de CSS. Podemos añadir el estilo directamente en HTML, o componer una clase CSS que incluya los efectos del cursor. Por ejemplo, directamente en HTML:
1 | <p style="cursor: zoom-in">Hacer zoom</p> |
Este es el resultado de añadir el valor «zoom-in» en la propiedad cursor de CSS (pon el ratón encima para verlo):
Hacer zoom
En nuestra experiencia, los cursores CSS más utilizados son «pointer» (para dar al usuario a entender que puede pinchar en una opción), «not-allowed» (para que el usuario vea que no se puede llevar a cabo una acción) y «wait» o «progress» para indicar que algo se está ejecutando en background.
Uso y compatibilidad
La propiedad cursor de CSS fue incluida en la versión CSS2. El valor por defecto, si no se especifica ningún cursor, es «auto». No es una propiedad animable, y se puede establecer tanto por CSS como por Javascript si necesitamos hacerlo de forma dinámica.
El cursor CSS está soportado en los siguientes navegadores, a partir de las versiones que se indican aquí abajo:
- Chrome 5.0
- Microsoft Edge 5.5
- Mozilla Firefox 4.0
- Safari 5.0
- Opera 9.6
Los cursores CSS son un elemento muy importante para garantizar una buena experiencia del usuario. Son muy útiles a la hora de que el usuario reconozca las acciones que puede o no puede llevar a cabo sin la necesidad de hacer clicks en nuestra web o aplicación.
¿Te ha resultado útil nuestro artículo sobre la propiedad cursor CSS? Déjanos un comentario aquí debajo 🙂
