Proprietà CSS cursor

La proprietà cursor controlla la forma del puntatore del mouse quando passa sopra un elemento. È un segnale visivo: la forma del puntatore comunica all'utente cosa accadrà se fa clic, trascina o passa il mouse — una mano indica "questo è cliccabile," un cursore a tratto indica "puoi selezionare del testo qui," una rotella che gira indica "attendi."

Questa pagina illustra quando usare cursor, l'elenco completo dei valori keyword raggruppati per scopo, come caricare un'immagine personalizzata come cursore (con la sintassi <url> e i suoi fallback), e le insidie di accessibilità da evitare.

Perché e quando usarlo

I browser già scelgono un cursore appropriato per ogni elemento — un cursore a tratto su un paragrafo, una mano che punta su un link. Di solito si sovrascrive il valore predefinito quando:

Si crea un controllo interattivo personalizzato (un <div> che funge da pulsante, una scheda trascinabile, un'impugnatura ordinabile) in cui il browser non è in grado di indovinare il cursore corretto. Qui un cursore pointer o grab ripristina l'affordance che gli utenti si aspettano.
Si vuole segnalare uno stato — un controllo disabilitato con not-allowed, o una regione occupata con wait/progress.
Si ha bisogno di un puntatore con marchio personalizzato o stile di gioco tramite un'immagine personalizzata.

Usarlo con parsimonia e in modo prevedibile. Un cursore che contraddice il comportamento (una mano pointer su testo non cliccabile, o none che nasconde il cursore su una pagina normale) crea più confusione che benefici.

Panoramica della sintassi

Il valore è composto da zero o più valori <url> separati da virgola, ciascuno che punta a un file immagine, seguito da un keyword di fallback obbligatorio. Il browser prova ogni immagine in ordine e passa alla successiva se un'immagine non può essere caricata; se nessuna viene caricata, utilizza il keyword. Ecco perché il keyword alla fine è obbligatorio — garantisce che l'utente abbia sempre qualche cursore.

/* 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;

Informazione

I browser moderni supportano grab, grabbing, zoom-in e zoom-out senza prefissi vendor. Per mantenere i clic dove gli utenti si aspettano, abbina le modifiche al cursore personalizzato con le proprietà correlate pointer-events e user-select.

Valore iniziale	auto
Si applica a	Tutti gli elementi.
Ereditato	Sì.
Animabile	No.
Versione	CSS2
Sintassi DOM	object.style.cursor = "cell";

Tutti i valori keyword

Tutti i keyword accettati dalla proprietà, in un unico posto. I più comuni nel lavoro quotidiano con le UI sono pointer (cliccabile), default (la freccia semplice), text, move, grab/grabbing e 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

Esempio con i valori auto e help

Esempio della proprietà CSS cursor con i valori auto e 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>

Provalo tu stesso »

Il prossimo esempio visualizza una casella con etichetta per ogni valore keyword, così puoi passarci sopra il mouse e vedere il relativo cursore nel tuo browser.

Esempio con tutti i valori cursor

Esempio della proprietà CSS cursor con tutti i valori

<!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>

Provalo tu stesso »

Cursore personalizzato con il valore "url"

È possibile fornire un'immagine personalizzata come cursore. Alcune regole rendono questo affidabile:

Terminare sempre con un keyword di fallback (, auto in basso). Senza di esso la dichiarazione è invalida e viene ignorata completamente.
Mantenere le immagini piccole. I browser limitano i cursori personalizzati a circa 32×32 px (128×128 px in alcuni); le immagini più grandi vengono scartate silenziosamente e viene utilizzato il fallback.
Impostare l'hotspot — il punto di clic attivo — con due numeri opzionali dopo l'URL: cursor: url("crosshair.png") 16 16, auto; rende il centro di un'immagine 32×32 il punto di clic. Omettendoli, viene utilizzato l'angolo in alto a sinistra.
Utilizzare un formato supportato da tutti i browser di destinazione (PNG e SVG sono sicuri; .cur/.ani sono solo per Windows).

Esempio della proprietà cursor con l'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>

Provalo tu stesso »

Valori

Valore	Descrizione	Prova
auto	Indica che il browser imposterà un cursore. È il valore predefinito di questa proprietà.	Prova »
default	È il cursore predefinito.	Prova »
none	Indica che nessun cursore viene visualizzato per l'elemento.	Prova »
context-menu	Il cursore indica che è disponibile un menu contestuale.	Prova »
help	Il cursore indica che è disponibile un aiuto.	Prova »
pointer	Il cursore indica un link come puntatore.	Prova »
progress	Il cursore indica che il programma è occupato o in esecuzione.	Prova »
wait	Il cursore indica che il programma è occupato.	Prova »
cell	Indica che il cursore segnalerà che una cella o un insieme di celle può essere selezionato.	Prova »
crosshair	Il cursore sarà visualizzato come un mirino.	Prova »
text	Il cursore indica del testo che può essere selezionato.	Prova »
`<url>`	Un elenco di URL separati da virgola per cursori personalizzati.	Prova »
vertical-text	Il cursore indica testo verticale che può essere selezionato.	Prova »
alias	Indica che il cursore segnalerà che verrà creato un alias di qualcosa.	Prova »
copy	Il cursore indica qualcosa che può essere copiato.	Prova »
move	Il cursore indica che qualcosa può essere spostato.	Prova »
no-drop	Il cursore indica che l'elemento trascinato non può essere rilasciato qui.	Prova »
not-allowed	Il cursore indica che l'azione richiesta non verrà eseguita.	Prova »
all-scroll	Indica che il cursore segnalerà che qualcosa può essere scorso in qualsiasi direzione.	Prova »
col-resize	Il cursore indica che la colonna può essere ridimensionata orizzontalmente.	Prova »
row-resize	Il cursore indica che la riga può essere ridimensionata verticalmente.	Prova »
n-resize	Il cursore indica che un bordo di un riquadro deve essere spostato verso l'alto.	Prova »
s-resize	Il cursore indica che un bordo di un riquadro deve essere spostato verso il basso.	Prova »
e-resize	Il cursore indica che un bordo di un riquadro deve essere spostato verso destra.	Prova »
w-resize	Il cursore indica che un bordo di un riquadro deve essere spostato verso sinistra.	Prova »
ns-resize	Il cursore indica un cursore di ridimensionamento bidirezionale.	Prova »
ew-resize	Il cursore indica un cursore di ridimensionamento bidirezionale.	Prova »
ne-resize	Il cursore indica che un bordo di un riquadro deve essere spostato verso l'alto e a destra.	Prova »
nw-resize	Il cursore indica che un bordo di un riquadro deve essere spostato verso l'alto e a sinistra.	Prova »
se-resize	Il cursore indica che un bordo di un riquadro deve essere spostato verso il basso e a destra.	Prova »
sw-resize	Il cursore indica che un bordo di un riquadro deve essere spostato verso il basso e a sinistra.	Prova »
nesw-resize	Il cursore indica un cursore di ridimensionamento bidirezionale.	Prova »
nwse-resize	Il cursore indica un cursore di ridimensionamento bidirezionale.	Prova »
zoom-in	Il cursore indica che qualcosa può essere ingrandito.	Prova »
zoom-out	Il cursore indica che qualcosa può essere rimpicciolito.	Prova »
grab	Il cursore indica che qualcosa può essere afferrato.	Prova »
grabbing	Il cursore indica che un elemento è attualmente in fase di trascinamento.	Prova »
initial	Imposta la proprietà al suo valore predefinito.	Prova »
inherit	Eredita la proprietà dall'elemento padre.

Accessibilità e problemi comuni

cursor è un suggerimento, non un controllo. Cambia l'aspetto del puntatore, non il comportamento dell'elemento. Un cursore pointer non rende cliccabile un <div>, e not-allowed non disabilita un pulsante — occorrono comunque comportamenti reali (un onclick, l'attributo disabled, ruoli ARIA).
Non affidarsi al cursore da solo per segnalare stati disabilitati o occupati. Gli utenti da tastiera e touch non lo vedono mai. Combinarlo con stili visibili e attributi corretti.
Evitare cursor: none su pagine ordinarie. Nascondere il puntatore può bloccare gli utenti che non riescono più a trovarlo. Riservarlo a esperienze a schermo intero (giochi, chioschi) che gestiscono il proprio puntatore.
Le immagini personalizzate possono compromettere l'usabilità se hanno basso contrasto, sono sovradimensionate o hanno un hotspot mal posizionato, così gli utenti fanno clic leggermente fuori bersaglio. Testare su sfondi chiari e scuri.
cursor è ereditato, quindi un valore impostato su un contenitore si applica ai suoi figli a meno che non lo sovrascrivano.

Proprietà correlate

pointer-events — decide se un elemento reagisce al puntatore.
user-select — controlla se il testo può essere selezionato (si abbina bene a cursor: text / cursor: default).
:hover — modifica gli stili mentre il puntatore è sopra un elemento.
caret-color — applica stile al cursore lampeggiante dell'input di testo, un "cursore" completamente diverso.

Esercitazione

Pratica

Cosa specifica la proprietà CSS 'cursor' nel web design?

Specifica il tipo di cursore da visualizzare quando si punta su un elemento.Specifica il colore del cursore quando si punta su un elemento.Specifica la dimensione del cursore quando si punta su un elemento.Influisce sul comportamento del cursore durante l'interazione con elementi di testo o grafici.