CSS CURSOR
This property controls the type of cursor that is used when a pointing device is over an element. Accepts a comma separated list of the below values. Browsers should attempt to first use the cursor indicated on the left, working to the right until it has a cursor it can use.
Note: Although the CSS spec says that this property is inherited, there are some cases in browsers where it is not explicitly so. Some elements that use a different default cursor (eg: hyperlinks, text entry elements) will override the parent cursor type by default unless explicitly set to “inherit”.
Example
blockquote {
cursor: help
}
Some Text
Possible Values
inherit: Explicitly sets the value of this property to that of the parent.
default: Browser default cursor. Often an arrow.
auto: Browser determines what cursor to display according to context.
[URL]: URL of a custom cursor to be used for the specified selector. If multiple URLs are listed for a cursor, the leftmost one is used. If that is not available, an attempt is made for the the next one indicated to the right, and so on. If none of the URL-defined cursors can be used, a generic cursor indicated at the end of the list is used.
n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize: Used to indicate when an edge of a box is to be moved/re-sized. Values represent directions relative to up/north.
crosshair: Usually resembles a plus sign (‘+’).
pointer: Used to present an actively selectable element, such as a hyperlink.
move: Used to indicate when something is movable.
text: Used to indicate that content is selectable. Often represented using an I-bar.
wait: Used to indicate that the user must wait because the program is busy. Usually represented by an hourglass or clock.
help: Used to indicate that help is available for the element. Often represented as a question mark or balloon.
hand: Use a hand icon.
all-scroll: Use an up/down/left/right arrow with a dot in the middle. Used to indicate that content can be scrolled in any direction.
col-resize: Used to indicate that a column can be horizontally re-sized. Represented with a vertical bar in the middle of two arrows pointing in opposite left/right directions.
row-resize: Used to indicate that a row or item can be vertically re-sized. Represented with a horizontal bar in the middle of two arrows pointing in opposite up/down directions.
no-drop: Used to indicate that a dragged item cannot be dropped at the current cursor position. Represented as a hand next to a small circle with a slash through it.
not-allowed: Used to indicate that a requested action can not be performed. Represented as a circle with a slash through it.
progress: Indicates that a process is running in the background, which will not affect user interaction with the system. Represented as an arrow with an hourglass next to it.
vertical-text: Used to represent editable vertical content. Represented as a horizontal I-bar.
alias: Use a cursor to indicate a shortcut or alias to another object. Often represented as an arrow with a small curved arrow next to it.
cell: Used to indicate that one or more “cells” (as in a spreadsheet) may be selected. Often rendered as a thick plus-sign, possibly having a dot in the middle.
copy: Used to indicate that content will be copied. Often rendered as an arrow with a small plus next to it.
count-down: Used to indicate a “count-down” operation by a program.
count-up: Used to indicate a “count-up” operation by a program.
count-up-down: Used to indicate a program is “counting-up” and “counting-down” in succession operation in a program.
grab: Used to indicate that content is “grabbable”. Often rendered as an open hand.
grabbing: Used to indicate that content is in the act of being “grabbed”. Often rendered as a closed/clenched hand.
spinning: Used to indicate that processing is being done by the program. Slightly different from the ‘wait’ value – ‘wait’ should indicate that no user interaction with the program is possible while the cursor is in that state, whereas ‘spinning’ indicates that the user may still interact with the program. Sometimes rendered as a spinning, striped ball.
12 Responses
does curson:Hand works in all browser?
yes cursor hand support all browsers
Cursor should be set as “pointer” if you want to the cursor to be the hand as “hand” is not recognised in all browsers.
Cheers
James
nice to get condensed information here
If you provide browser compatibility it will me more user friendly..
Thanks for nice information.
yes cursor hand support all browsers…
I want to position the cursor in the middle of the text box, i mean vertical alignment. how to do it?
[…] really easy to make something look like a button. Of course, don’t forget to change how the cursor functions and use hovers to let people know “Hey, this is a thing I can click.” These are things […]
Hi
For mouse cursor appearance you can also use a “.cur” type imaage.
selector { cursor: url(‘image.cur’), default; }
Nice overview of the different CSS3 cursors, didn’t know there were so many options. But glad to see the power of CSS3!
Regards
[…] of cursors http://www.css3.com/css-cursor/ and http://www.sitepoint.com/css3-cursor-styles/#fbid=2MQ0iRM9or2 say that it is supported in […]
Hi http://ekav.info