CSS : Change the appearance of the cursor

October 2016

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.

Related :

This document entitled « CSS : Change the appearance of the cursor » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.