Interaction
cursor
cursor sets the shape of the cursor shown when a mouse or other pointer is over the element.
Syntax[ <cursor-image> , ]* <cursor-predefined> …
[ <cursor-image> , ]* <cursor-predefined>
<cursor-image> = [ <url> | <url-set> ] <number>{2}?
<cursor-predefined> = auto | default | none
| context-menu | help | pointer | progress | wait
| cell | crosshair | text | vertical-text
| alias | copy | move | no-drop | not-allowed | grab | grabbing
| e-resize | n-resize | ne-resize | nw-resize
| s-resize | se-resize | sw-resize | w-resize
| ew-resize | ns-resize | nesw-resize | nwse-resize
| col-resize | row-resize | all-scroll | zoom-in | zoom-outPreview
Code
.box {
cursor: pointer;
}Controls
About
Values
Write a keyword for the cursor shape. The initial value is auto, which lets the browser pick one for the spot (the I-beam text over text, the default arrow elsewhere). cursor is inherited, so setting it on a parent also sets it inside.
Hover over the preview box or over the buttons in the controls to see each cursor. Compare auto and default to see whether the cursor changes over the sample text.
Kinds of keywords
- General:
auto,default,none(hides the cursor) - Links and status:
pointer(a link),help,context-menu,progress(busy in the background, still usable),wait(busy, not usable until done) - Selection:
text,vertical-text(vertical text),cell(table cells),crosshair - Drag and drop:
grab,grabbing,move,copy,alias,no-drop,not-allowed - Resizing and scrolling: compass keywords such as
n-resize(n, e, s, w are north, east, south, west), two-way ones such asew-resize,col-resize,row-resize,all-scroll - Zoom:
zoom-in,zoom-out
The cursor images come from the OS and the browser, so they look different from one setup to another. On some systems a one-way keyword such as n-resize or s-resize shows a two-way arrow.
Image cursors
You can also use an image, as in url(cursor.png) 4 4, pointer. The two numbers after the image are the point the cursor points at, measured from the image's top-left corner. Several images can be listed with commas, but the list must end with a keyword to use when no image loads. The controls on this page only offer keywords.
Firefox, Chrome, and Edge don't use images larger than 128×128 pixels. To work everywhere, keep cursor images within 32×32 pixels.
It only changes the shape
cursor only changes how the pointer looks. pointer doesn't make an element clickable, and not-allowed doesn't stop clicks. Build clickable things with button or a, and use the disabled attribute and the like to make them unclickable.
Touch screens on phones and tablets show no cursor, so don't rely on the cursor shape alone to explain anything. On an iPad with a mouse or trackpad, only text has an effect.