1
Thanks

A few words of thanks would be greatly appreciated.

CSS : Change the appearance of the cursor





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


Example of a cross shaped cursor (crosshair):

body{  
  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.
body{  
  cursor: crosshair;  
}  
img{  
  cursor: wait;  
}  
a:link{  
  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.
1
Thanks

A few words of thanks would be greatly appreciated.

Ask a question
Jean-François Pillou

CCM is a leading international tech website. Our content is written in collaboration with IT experts, under the direction of Jeff Pillou, founder of CCM.net. CCM reaches more than 50 million unique visitors per month and is available in 11 languages.

Learn more about the CCM team

Related

Original article published by . Translated by jak58. Latest update on by jak58.

This document, titled "CSS : Change the appearance of the cursor," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (https://ccm.net/).

0 Comments