13.3. Personalizar el cursor
CSS no permite modificar los elementos propios del navegador o de la interfaz de usuario del sistema operativo. Sin embargo, el puntero del ratón es una excepción muy importante, ya que se puede modificar mediante la propiedad cursor.
| cursor | Puntero del ratón |
|---|---|
| Valores | ( (<url> ,)* ( auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ) ) | inherit |
| Se aplica a | Todos los elementos |
| Valor inicial | auto |
| Descripción | Permite personalizar el puntero del ratón |
La propiedad cursor no sólo permite seleccionar un puntero entre los disponibles en el sistema operativo (flecha, mano, reloj de arena, redimensionar, etc.) sino que incluso permite indicar la URL de una imagen que se quiere mostrar como puntero personalizado.
Se pueden indicar varias URL para que CSS intente cargar varias imágenes: si la primera imagen del puntero no se carga o no la soporta el navegador, se pasa a la siguiente imagen y así sucesivamente hasta que se pueda cargar alguna imagen.
El siguiente ejemplo muestra el caso de un puntero definido con varias URL y un valor estándar:
:link, :visited { cursor: url(puntero.svg), url(puntero.cur), pointer }
Si el navegador soporta las imágenes en formato SVG, el puntero del ratón cambia su aspecto por la imagen puntero.svg. Si el navegador no soporta el formato SVG, intenta cargar la siguiente URL que define un puntero en formato .cur. Si no se puede cargar correctamente, se mostraría el valor preestablecido pointer.
Los valores preestablecidos para el puntero se muestran a continuación:
| Puntero | Navegadores que lo soportan |
|---|---|
Figura 13.3. cursor: default | Todos |
Figura 13.4. cursor: crosshair | Todos |
Figura 13.5. cursor: hand | Solo Internet Explorer |
Figura 13.6. cursor: pointer | Todos salvo Internet Explorer |
Figura 13.7. cursor:pointer; cursor: hand | Todos |
Figura 13.8. cursor: move | Todos |
Figura 13.9. cursor: text | Todos |
Figura 13.10. cursor: wait | Todos |
Figura 13.11. cursor: help | Todos |
Figura 13.12. cursor: n-resize | Todos |
Figura 13.13. cursor: ne-resize | Todos |
Figura 13.14. cursor: e-resize | Todos |
Figura 13.15. cursor: se-resize | Todos |
Figura 13.16. cursor: s-resize | Todos |
Figura 13.17. cursor: sw-resize | Todos |
Figura 13.18. cursor: w-resize | Todos |
Figura 13.19. cursor: nw-resize | Todos |
Figura 13.20. cursor: progress | Solo Internet Explorer |
Figura 13.21. cursor: not-allowed | Solo Internet Explorer |
Figura 13.22. cursor: no-drop | Solo Internet Explorer |
Figura 13.23. cursor: vertical-text | Solo Internet Explorer |
Figura 13.24. cursor: all-scroll | Solo Internet Explorer |
Figura 13.25. cursor: col-resize | Solo Internet Explorer |
Figura 13.26. cursor: row-resize | Solo Internet Explorer |
Figura 13.27. cursor: url(...) | Solo Internet Explorer |
El puntero personalizado más utilizado es la opción cursor: pointer y cursor: hand que muestra en el puntero una mano que puede pinchar sobre el elemento. Otro puntero muy utilizado es cursor: move que permite indicar en las aplicaciones web dinámicas los elementos de la página que se pueden mover.
Se puede ver un ejemplo de cada uno de los punteros y la compatibilidad con los diferentes navegadores en la siguiente página: http://www.echoecho.com/csscursors.htm