CSS : Change the appearance of the cursor

Ask a question

The cursor property allow you to change the appearance of the cursor on an element of a web page.
The client will automatically display the cursor on his computer that matches the type of cursor you choose.


Example of a cross shaped cursor (crosshair):


One can of course give different styles to several elements of the same page
Example of a style as a cross on the "body" style decorated with a hourglass shape on the images and hand on the links.
  cursor: crosshair;  
  cursor: wait;  
  cursor:  pointer;  

List of possible attributes

Accepted by all browsers

  • Self: Appearance same as the default cursor on the tag that has the attribute does not change.
  • Default: Cursor default browser.
  • Pointer: Cursor shaped hand with his finger unfolded.
  • Text: Cursor text editing.
  • Help: Cursor help.
  • Wait: Wait Cursor
  • Progress: Slider progression.
  • Move: Cursor movement.
  • Crosshair: Cursor-shaped cross.

Cursors resizing

  • N-resize: resize cursor to the bottom up.
  • S-resize: resize slider top to bottom.
  • E-resize: resize cursor left to right.
  • W-resize: resize cursor right to left.
  • Ne-resize: Resize Cursor bottom-left to top right.
  • Nw-resize: Resize Cursor bottom-right to top left.
  • Se-resize: resize cursor top-left to bottom right.
  • Sw-resize: resize cursor top right to bottom left.
    • Note that: In fact, it is easy to remember all these properties at once.
    • n, s, e, w correspond to the north, south, east, west, ie up, down, right, left.
    • Simply indicate the direction in which the cursor is pointing, followed of course "-resize".

Not supported by all browsers

Firefox and Opera, ignore the following guidelines.
  • Inherit: Even as the cursor parent tag.
  • Not-allowed: Cursor shaped round strikeout.
  • No-drop: Cursor shaped hand with fingers and a round unfolded strikeout.
  • Col-resize: Cursor is two vertical lines with an arrow on each side.
  • Row-resize: Cursor is two horizontal lines with an arrow on each side.
Jean-François Pillou

Jean-François Pillou - Founder of CCM
Better known as Jeff, Jean-François Pillou is the founder of CommentCaMarche.net. He is also CEO of CCM Benchmark and digital director at the Figaro Group.

Learn more about the CCM team