Core CSS

Built-in Cursors

Cursors are changed to signal that the element that is under the cursor can be clicked, selected, or dragged. The cursor can be customized to be any image and even animated. However, it is much easier to use the built-in cursors, which can be set without supplying any additional files or URLs.

There are 20 built-in cursors that can be used in HTML, as shown below: auto, crosshair, default, e-resize, grab, help, move, n-resize, ne-resize, nw-resize, pointer, progress, s-resize, se-resize, sw-resize, text, w-resize, wait, not-allowed, and no-drop. In the code below, we create two types of elements for each of these cursors: block (div) and inline (span). To see the cursor change, move the cursor over each of the elements.

 

Output

auto
crosshair
default
e-resize
grab
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait
not-allowed
no-drop
auto crosshair default e-resize grab help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait not-allowed no-drop
 
 

© 2007–2022 XoaX.net LLC. All rights reserved.