cursor (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Buggy | Full | Partial | Partial |
| Inherited | Initial | Version |
|---|---|---|
| Yes | auto |
CSS2, 2.1 |
Example
This style rule sets the cursor to
take the appearance of the text cursor for the element whose ID
is"current":
#current {
cursor: text;
}Description
This property sets the type of cursor to be displayed for a pointing device.
Value
We can specify a comma-separated list of URI values from which we want CSS to retrieve the cursor. And in a similar way to the method by which a list of font family names is used, the browser will use the first URI it successfully retrieves. Note that you must also specify a fallback cursor-type keyword.
Descriptions
for all the valid cursor keywords are provided
here:
auto- the browser’s default cursor in the current context
crosshair- a crosshair cursor
default- the default cursor for the platform, without regard for the context
e-resize- a cursor that indicates that a right-hand (“east”) edge will be moved
help- a cursor that indicates that help is available for the object under the cursor
move- a cursor that indicates that something will be moved
n-resize- a cursor that indicates that a top (“north”) edge will be moved
ne-resize- a cursor that indicates that top (“north”) and right-hand (“east”) edges will be moved
nw-resize- a cursor that indicates that top (“north”) and left-hand (“west”) edges will be moved
pointer- a cursor that indicates a link (commonly a hand with an extended index finger)
progress- a cursor that indicates progress: the application is busy doing something, but the user can still interact with it
s-resize- a cursor that indicates that a bottom (“south”) edge will be moved
se-resize- a cursor that indicates that bottom (“south”) and right-hand (“east”) edges will be moved
sw-resize- a cursor that indicates that bottom (“south”) and left-hand (“west”) edges will be moved
text- a cursor that indicates that text may be selected (commonly an I-beam)
w-resize- a cursor that indicates that a left-hand (“west”) edge will be moved
wait- a cursor that indicates that the application is busy and that the user should wait (commonly an hourglass)
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Partial |
| 2.0 | Partial | |
| 3.0 | Partial | |
| Opera | 9.2 | Partial |
| 9.5 | Partial |
Internet Explorer for
Windows versions up to and including 5.5 don’t support the
pointer value; instead, they use the non-standard
value hand.
In Internet Explorer for Windows up to and including version 7, if a relative URI value is specified in an external style sheet file the base URI is considered to be the URI of the document containing the element and not the URI of the style sheet in which the declaration appears.
Internet Explorer for Windows versions up to and
including 7 don’t support the value inherit.
Opera versions up to and including 9.5 don’t support URI values.
Safari versions up to and including 3 don’t support URI values.
User-contributed notes
- ID:
- #5
- Date:
- Fri, 29 Feb 2008 03:27:43 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
Definitely need graphical examples of the cursors. In fact, you already have them:
http://sitepointstatic.com/graphics/table4.1.png
- ID:
- #4
- Date:
- Wed, 20 Feb 2008 11:54:52 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
I must agree with the other guys, it would be nice either to have working examples of the functions (of course then I'd have to try it out in different browsers, but that's my job:) or some screenshots. I would prefer the "real" examples...
Cheers, tiburcio
P.S. I am looking forward to the other sections, especially the javascript-reference.
- ID:
- #3
- Date:
- Wed, 20 Feb 2008 10:42:20 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
i agree, these new pages are a great help (don't get me wrong), but as CSS is predominantly concerned with appearance - i do feel this new area of sitepoint would be significantly enhanced if there were some illustrated examples / screen grabs etc. overall though well done sitepoint for creating this section (and also for canvassing our views via your survey)
- ID:
- #2
- Date:
- Mon, 07 Jan 2008 20:58:09 GMT
I agree with sj_waterson. Perhaps cursor changes when you roll-over each cursor type.
- ID:
- #1
- Date:
- Thu, 06 Dec 2007 17:23:55 GMT
Some pictures of what these different cursors could look like on different systems might be a nice addition here.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
