cursor
Description
The cursor property for CSS specifies the type of cursor to display for the pointing device when the cursor's hotspot is within the element's border edge.
Syntax
CSS
cursor: value;
JS
object.style.cursor = "value";
Values
<'cursor'> = [ [<url> [<x> <y>]?,]* [ 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-out ] ]
<url> = url( <string> <url-modifier>* )
<string>
Specifies a sequence of characters delimited by double quotes (") or single quotes (').
<url-modifier>
Changes the meaning or the interpretation of the URL.
<x>
The x coordinate.
<y>
The y coordinate.
auto
Automatically specified by the user agent.
default
The platform-dependent default cursor.
none
No cursor is rendered.
context-menu
A context menu is available for the object under the cursor.
help
Help is available for the object under the cursor.
pointer
A pointer that indicates a link.
progress
A progress indicator.
wait
Indicates that the program is busy and the user should wait.
cell
Indicates that a cell or set of cells may be selected.
crosshair
A simple crosshair.
text
Indicates text that may be selected.
vertical-text
Indicates vertical-text that may be selected.
alias
Indicates an alias of/shortcut to something is to be created.
copy
Indicates something is to be copied.
move
Indicates something is to be moved.
no-drop
Indicates that the dragged item cannot be dropped at the current cursor location.
not-allowed
Indicates that the requested action will not be carried out.
grab
Indicates that something can be grabbed.
grabbing
Indicates that something is being grabbed.
e-resize
Indicates that the edge is to be moved east.
n-resize
Indicates that the edge is to be moved north.
ne-resize
Indicates that the edge is to be moved north-east.
nw-resize
Indicates that the edge is to be moved north-west.
s-resize
Indicates that the edge is to be moved south.
se-resize
Indicates that the edge is to be moved south-east.
sw-resize
Indicates that the edge is to be moved south-west.
w-resize
Indicates that the edge is to be moved west.
ew-resize
Indicates that the edge is to be moved east-west.
ns-resize
Indicates that the edge is to be moved north-south.
nesw-resize
Indicates that the edge is to be moved north-east-south-west.
nwse-resize
Indicates that the edge is to be moved north-west-south-east.
col-resize
Indicates that the item/column can be resized horizontally.
row-resize
Indicates that the item/row can be resized vertically.
all-scroll
Indicates that the something can be scrolled in any direction.
zoom-in
Indicates that something can be zoomed in.
zoom-out
Indicates that something can be zoomed out.
Initial
auto
Examples
1 · alias
2 · all-scroll
3 · auto
4 · cell
5 · col-resize
6 · context-menu
7 · copy
8 · crosshair
9 · default
10 · e-resize
11 · ew-resize
12 · grab
13 · grabbing
14 · help
15 · move
16 · n-resize
17 · ne-resize
18 · nesw-resize
19 · no-drop
20 · none
21 · not-allowed
22 · ns-resize
23 · nw-resize
24 · nwse-resize
25 · pointer
26 · progress
27 · row-resize
28 · s-resize
29 · se-resize
30 · sw-resize
31 · text
32 · url
33 · vertical-text
34 · w-resize
35 · wait
36 · x y
37 · zoom-in
38 · zoom-out
39 · JS
Links
Properties
- accent-color
- align-content
- align-items
- align-self
- all
- animation
- animation-composition
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timeline
- animation-timing-function
- appearance
- aspect-ratio
- backdrop-filter
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-ellipsis
- block-size
- border
- border-block
- border-block-color
- border-block-end
- border-block-end-color
- border-block-end-style
- border-block-end-width
- border-block-start
- border-block-start-color
- border-block-start-style
- border-block-start-width
- border-block-style
- border-block-width
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-end-end-radius
- border-end-start-radius
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-inline
- border-inline-color
- border-inline-end
- border-inline-end-color
- border-inline-end-style
- border-inline-end-width
- border-inline-start
- border-inline-start-color
- border-inline-start-style
- border-inline-start-width
- border-inline-style
- border-inline-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-start-end-radius
- border-start-start-radius
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- caption-side
- caret
- caret-color
- caret-shape
- clear
- clip
- clip-path
- color
- color-scheme
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container
- container-name
- container-type
- content
- content-visibility
- continue
- counter-increment
- counter-reset
- counter-set
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-feature-settings
- font-kerning
- font-optical-sizing
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-variant
- font-variant-caps
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-variation-settings
- font-weight
- forced-color-adjust
- gap
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-start
- grid-row
- grid-row-end
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- hanging-punctuation
- height
- hyphens
- image-rendering
- initial-letter
- initial-letter-align
- inline-size
- inset
- inset-block
- inset-block-end
- inset-block-start
- inset-inline
- inset-inline-end
- inset-inline-start
- isolation
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- line-break
- line-clamp
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-block
- margin-block-end
- margin-block-start
- margin-bottom
- margin-inline
- margin-inline-end
- margin-inline-start
- margin-left
- margin-right
- margin-top
- mask
- mask-border
- mask-border-mode
- mask-border-outset
- mask-border-repeat
- mask-border-slice
- mask-border-source
- mask-border-width
- mask-clip
- mask-composite
- mask-image
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size
- mask-type
- math-depth
- math-shift
- math-style
- max-block-size
- max-height
- max-inline-size
- max-lines
- max-width
- min-block-size
- min-height
- min-inline-size
- min-width
- mix-blend-mode
- nav-down
- nav-left
- nav-right
- nav-up
- object-fit
- object-position
- opacity
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-block
- overflow-clip-margin
- overflow-inline
- overflow-wrap
- overflow-x
- overflow-y
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- paint-order
- perspective
- perspective-origin
- place-content
- place-items
- place-self
- pointer-events
- position
- print-color-adjust
- quotes
- resize
- right
- rotate
- row-gap
- scale
- scroll-behavior
- scroll-margin
- scroll-margin-block
- scroll-margin-block-end
- scroll-margin-block-start
- scroll-margin-bottom
- scroll-margin-inline
- scroll-margin-inline-end
- scroll-margin-inline-start
- scroll-margin-left
- scroll-margin-right
- scroll-margin-top
- scroll-padding
- scroll-padding-block
- scroll-padding-block-end
- scroll-padding-block-start
- scroll-padding-bottom
- scroll-padding-inline
- scroll-padding-inline-end
- scroll-padding-inline-start
- scroll-padding-left
- scroll-padding-right
- scroll-padding-top
- scroll-snap-align
- scroll-snap-stop
- scroll-snap-type
- scroll-timeline
- scroll-timeline-axis
- scroll-timeline-name
- scrollbar-color
- scrollbar-gutter
- scrollbar-width
- shape-image-threshold
- shape-margin
- shape-outside
- tab-size
- table-layout
- text-align
- text-align-all
- text-align-last
- text-combine-upright
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip-ink
- text-decoration-style
- text-decoration-thickness
- text-decoration-trim
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-justify
- text-orientation
- text-overflow
- text-shadow
- text-transform
- text-underline-offset
- text-underline-position
- top
- transform
- transform-box
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- translate
- unicode-bidi
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- zoom