Propiedad CSS cursor

La propiedad cursor controla la forma del puntero del ratón cuando se coloca sobre un elemento. Es una señal visual: la forma del puntero indica al usuario lo que ocurrirá si hace clic, arrastra o pasa el ratón sobre él — una mano significa "esto es cliqueable", una barra de texto significa "puedes seleccionar texto aquí", una rueda giratoria significa "espera".

Esta página explica cuándo usar cursor, la lista completa de valores de palabra clave agrupados por propósito, cómo cargar tu propia imagen como cursor personalizado (con la sintaxis <url> y sus alternativas), y los problemas de accesibilidad que debes evitar.

Por qué y cuándo usarlo

Los navegadores ya eligen un cursor adecuado para cada elemento — una barra de texto sobre un párrafo, una mano apuntando sobre un enlace. Principalmente se sobrescribe el valor predeterminado cuando:

Construyes un control interactivo personalizado (un <div> que actúa como botón, una tarjeta arrastrable, un manejador ordenable) donde el navegador no puede adivinar el cursor correcto. Aquí un cursor pointer o grab restaura la affordance que los usuarios esperan.
Quieres señalar un estado — un control deshabilitado con not-allowed, o una región ocupada con wait/progress.
Necesitas un puntero de marca o estilo de juego mediante una imagen personalizada.

Úsalo con moderación y de forma predecible. Un cursor que contradice el comportamiento (una mano pointer sobre texto no cliqueable, o none ocultando el cursor en una página normal) confunde a los usuarios más de lo que los ayuda.

Descripción general de la sintaxis

El valor es cero o más valores <url> separados por comas, cada uno apuntando a un archivo de imagen, seguido de una palabra clave de reserva obligatoria. El navegador prueba cada imagen en orden y recurre a la siguiente si una imagen no puede cargarse; si ninguna carga, usa la palabra clave. Por eso la palabra clave al final es obligatoria — garantiza que el usuario siempre obtenga algún cursor.

/* keyword only */
cursor: pointer;

/* custom image with a keyword fallback (the fallback is required) */
cursor: url("cursor.png"), auto;

/* multiple images tried in order, then the fallback */
cursor: url("cursor.svg"), url("cursor.png"), auto;

Información

Los navegadores modernos admiten grab, grabbing, zoom-in y zoom-out sin prefijos de proveedor. Para que los clics aterricen donde los usuarios esperan, combina los cambios de cursor personalizado con las propiedades relacionadas pointer-events y user-select.

Valor inicial	auto
Se aplica a	Todos los elementos.
Heredado	Sí.
Animable	No.
Versión	CSS2
Sintaxis DOM	object.style.cursor = "cell";

Todos los valores de palabra clave

Cada palabra clave que acepta la propiedad, en un solo lugar. Las más comunes en el trabajo diario de UI son pointer (cliqueable), default (la flecha simple), text, move, grab/grabbing y not-allowed.

cursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | <url> | vertical-text | alias | copy | move | no-drop | not-allowed | all-scroll | col-resize | row-resize | n-resize | s-resize | e-resize | w-resize | ns-resize | ew-resize | ne-resize | nw-resize | se-resize | sw-resize | nesw-resize | nwse-resize | zoom-in | zoom-out | grab | grabbing

Ejemplo con los valores auto y help

Ejemplo de la propiedad CSS cursor con los valores auto y help

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .auto {
        cursor: auto;
      }
      .help {
        cursor: help;
      }
      .cursor {
        display: flex;
        flex-wrap: wrap;
      }
      .cursor > div {
        flex: 120px;
        padding: 10px 2px;
        white-space: nowrap;
        border: 2px solid #666;
        border-radius: 20px;
        margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
        background: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="help">help</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

El siguiente ejemplo muestra una caja etiquetada para cada valor de palabra clave, de modo que puedas pasar el ratón sobre cada una y ver su cursor en tu navegador.

Ejemplo que muestra todos los valores de cursor

Ejemplo de la propiedad CSS cursor con todos los valores

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .cursor {
        display: flex;
        flex-wrap: wrap;
      }
      .cursor > div {
        flex: 120px;
        padding: 10px 2px;
        white-space: nowrap;
        border: 2px solid #666;
        border-radius: 20px;
        margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
        background: #eee;
      }
      .auto {
        cursor: auto;
      }
      .default {
        cursor: default;
      }
      .none {
        cursor: none;
      }
      .context-menu {
        cursor: context-menu;
      }
      .help {
        cursor: help;
      }
      .pointer {
        cursor: pointer;
      }
      .progress {
        cursor: progress;
      }
      .wait {
        cursor: wait;
      }
      .cell {
        cursor: cell;
      }
      .crosshair {
        cursor: crosshair;
      }
      .text {
        cursor: text;
      }
      .vertical-text {
        cursor: vertical-text;
      }
      .alias {
        cursor: alias;
      }
      .copy {
        cursor: copy;
      }
      .move {
        cursor: move;
      }
      .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;
      }
      .n-resize {
        cursor: n-resize;
      }
      .e-resize {
        cursor: e-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;
      }
      .grab {
        cursor: grab;
      }
      .grabbing {
        cursor: grabbing;
      }
      .zoom-in {
        cursor: zoom-in;
      }
      .zoom-out {
        cursor: zoom-out;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="default">default</div>
      <div class="none">none</div>
      <div class="context-menu">context-menu</div>
      <div class="help">help</div>
      <div class="pointer">pointer</div>
      <div class="progress">progress</div>
      <div class="wait">wait</div>
      <div class="cell">cell</div>
      <div class="crosshair">crosshair</div>
      <div class="text">text</div>
      <div class="vertical-text">vertical-text</div>
      <div class="alias">alias</div>
      <div class="copy">copy</div>
      <div class="move">move</div>
      <div class="no-drop">no-drop</div>
      <div class="not-allowed">not-allowed</div>
      <div class="all-scroll">all-scroll</div>
      <div class="col-resize">col-resize</div>
      <div class="row-resize">row-resize</div>
      <div class="n-resize">n-resize</div>
      <div class="s-resize">s-resize</div>
      <div class="e-resize">e-resize</div>
      <div class="w-resize">w-resize</div>
      <div class="ns-resize">ns-resize</div>
      <div class="ew-resize">ew-resize</div>
      <div class="ne-resize">ne-resize</div>
      <div class="nw-resize">nw-resize</div>
      <div class="se-resize">se-resize</div>
      <div class="sw-resize">sw-resize</div>
      <div class="nesw-resize">nesw-resize</div>
      <div class="nwse-resize">nwse-resize</div>
      <div class="grab">grab</div>
      <div class="grabbing">grabbing</div>
      <div class="zoom-in">zoom-in</div>
      <div class="zoom-out">zoom-out</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Cursor personalizado con el valor "url"

Puedes proporcionar tu propia imagen como cursor. Algunas reglas hacen esto fiable:

Termina siempre con una palabra clave de reserva (, auto a continuación). Sin ella, la declaración no es válida y se ignora por completo.
Mantén las imágenes pequeñas. Los navegadores limitan los cursores personalizados a aproximadamente 32×32 px (128×128 px en algunos); las imágenes más grandes se descartan silenciosamente y se usa la alternativa.
Establece el punto activo — el punto de clic activo — con dos números opcionales después de la URL: cursor: url("crosshair.png") 16 16, auto; hace que el centro de una imagen de 32×32 sea el punto de clic. Si se omiten, se usa la esquina superior izquierda.
Usa un formato compatible con todos los navegadores de destino (PNG y SVG son seguros; .cur/.ani son solo para Windows).

Ejemplo de la propiedad cursor con url

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .cursor {
        display: inline-block;
        width: 30px;
        height: 30px;
        cursor: url("/uploads/media/default/0001/04/6388ec92938ec31c9f019a249174f683118b55d6.png"), auto;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <i class="cursor">Icon</i>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción	Pruébalo
auto	Indica que el navegador establecerá un cursor. Es el valor predeterminado de esta propiedad.	Pruébalo »
default	Es el cursor predeterminado.	Pruébalo »
none	Indica que no se muestra ningún cursor para el elemento.	Pruébalo »
context-menu	El cursor indica que hay un menú contextual disponible.	Pruébalo »
help	El cursor indica que hay ayuda disponible.	Pruébalo »
pointer	El cursor indica un enlace como puntero.	Pruébalo »
progress	El cursor indica que el programa está ocupado o en progreso.	Pruébalo »
wait	El cursor indica que el programa está ocupado.	Pruébalo »
cell	Indica que el cursor señalará que se puede seleccionar una celda o un conjunto de celdas.	Pruébalo »
crosshair	El cursor se muestra como una mira.	Pruébalo »
text	El cursor indica texto que se puede seleccionar.	Pruébalo »
`<url>`	Una lista de URLs separadas por comas para cursores personalizados.	Pruébalo »
vertical-text	El cursor indica texto vertical que se puede seleccionar.	Pruébalo »
alias	Indica que el cursor señalará que se va a crear un alias de algo.	Pruébalo »
copy	El cursor indica algo que se puede copiar.	Pruébalo »
move	El cursor indica que algo se puede mover.	Pruébalo »
no-drop	El cursor indica que el elemento arrastrado no se puede soltar aquí.	Pruébalo »
not-allowed	El cursor indica que la acción solicitada no se ejecutará.	Pruébalo »
all-scroll	Indica que el cursor señalará que algo se puede desplazar en cualquier dirección.	Pruébalo »
col-resize	El cursor indica que la columna se puede redimensionar horizontalmente.	Pruébalo »
row-resize	El cursor indica que la fila se puede redimensionar verticalmente.	Pruébalo »
n-resize	El cursor indica que el borde de un cuadro se moverá hacia arriba.	Pruébalo »
s-resize	El cursor indica que el borde de un cuadro se moverá hacia abajo.	Pruébalo »
e-resize	El cursor indica que el borde de un cuadro se moverá hacia la derecha.	Pruébalo »
w-resize	El cursor indica que el borde de un cuadro se moverá hacia la izquierda.	Pruébalo »
ns-resize	El cursor indica un cursor de redimensionamiento bidireccional.	Pruébalo »
ew-resize	El cursor indica un cursor de redimensionamiento bidireccional.	Pruébalo »
ne-resize	El cursor indica que el borde de un cuadro se moverá hacia arriba y a la derecha.	Pruébalo »
nw-resize	El cursor indica que el borde de un cuadro se moverá hacia arriba y a la izquierda.	Pruébalo »
se-resize	El cursor indica que el borde de un cuadro se moverá hacia abajo y a la derecha.	Pruébalo »
sw-resize	El cursor indica que el borde de un cuadro se moverá hacia abajo y a la izquierda.	Pruébalo »
nesw-resize	El cursor indica un cursor de redimensionamiento bidireccional.	Pruébalo »
nwse-resize	El cursor indica un cursor de redimensionamiento bidireccional.	Pruébalo »
zoom-in	El cursor indica que algo se puede ampliar.	Pruébalo »
zoom-out	El cursor indica que algo se puede reducir.	Pruébalo »
grab	El cursor indica que algo se puede agarrar.	Pruébalo »
grabbing	El cursor indica que un elemento está siendo arrastrado actualmente.	Pruébalo »
initial	Hace que la propiedad use su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Accesibilidad y errores comunes

cursor es una sugerencia, no un control. Cambia el aspecto del puntero, nunca lo que hace el elemento. Un cursor pointer no hace que un <div> sea cliqueable, y not-allowed no deshabilita un botón — aún necesitas comportamiento real (un onclick, el atributo disabled, roles ARIA).
No dependas solo del cursor para señalar estados deshabilitados o de espera. Los usuarios de teclado y táctil nunca lo ven. Combínalo con estilos visibles y los atributos correctos.
Evita cursor: none en páginas ordinarias. Ocultar el puntero puede dejar atrapados a usuarios que ya no pueden encontrarlo. Resérvalo para experiencias a pantalla completa (juegos, quioscos) que gestionen su propio puntero.
Las imágenes personalizadas pueden perjudicar la usabilidad si tienen bajo contraste, son demasiado grandes o tienen un punto activo mal colocado, de modo que los usuarios hacen clic ligeramente fuera del objetivo. Prueba con fondos claros y oscuros.
cursor es heredado, por lo que un valor establecido en un contenedor se aplica a sus elementos hijos a menos que ellos lo sobreescriban.

Propiedades relacionadas

pointer-events — decide si un elemento reacciona al puntero en absoluto.
user-select — controla si el texto puede seleccionarse (funciona bien con cursor: text / cursor: default).
:hover — cambia estilos mientras el puntero está sobre un elemento.
caret-color — estiliza el cursor parpadeante de entrada de texto, un "cursor" completamente diferente.

Práctica

¿Qué especifica la propiedad CSS 'cursor' en el diseño web?

Especifica el tipo de cursor que se muestra al apuntar sobre un elemento.Especifica el color del cursor al apuntar sobre un elemento.Especifica el tamaño del cursor al apuntar sobre un elemento.Afecta el comportamiento del cursor al interactuar con elementos de texto o gráficos.