The CSS Cursor

Introduction
For the computer screen, the cursor is the mouse pointer. CSS allows you to give different shapes to this cursor. In this article, I give you the names of the different shapes, the descriptions of the shapes and code samples indicating how you can create them.

CSS is now at version 2. Version 1 did not say anything about the cursor. The information given you here is based on the CSS2 specification.

You need basic knowledge in CSS in order to understand this article.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Giving the Cursor a Shape
To give a cursor a shape, you need a cursor/value pair in the declaration block for the CSS rule of the element concerned. The cursor property can take many values. You give the cursor a particular shape by giving a particular value to the cursor property. In this article I give you the names of the values (shapes) and their meanings. When the mouse pointer is over an element (or over the property of the element) the mouse pointer takes the shape, which the value of the cursor property specifies for that element. For this article, the cursor and the mouse pointer mean the same thing.

Now let us look at the values and examples. In many of the examples an HTML Paragraph element whose width is 30% that of the BODY width is used.

auto
With this value, the browser determines the shape of the cursor based on the current content. This is usually the same as not having any cursor/value pair in the style sheet. When you do not have any cursor/value pair in the style sheet, the browser normally determines the shape of the cursor based on the current context.
crosshair
This shape is a simple crosshair, like short line segments resembling a "+" sign. Try the following code that illustrates this for the Paragraph element. When the browser is displaying the paragraph, move the mouse pointer over it and note the shape of the mouse pointer.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

p {width:30%; cursor:crosshair}

This is a paragraph.

This is a paragraph.

This is a paragraph.

default
This value is for the platform-dependent default cursor. It is often rendered as an arrowhead. You should be used to this shape.
pointer
If you have made your element to behave like a hyperlink, then you can use this value. It is usually rendered as a hand. Assume that you have an HTML SELECT element and you have written script (JavaScript) code to make each HTML OPTION element behave like a hyperlink, then you can use this value for the OPTION elements. The following code (without script) illustrates this. Not all browsers support this feature.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

option {cursor:pointer}

The First Item
The Second Item
The Third Item

move
This value indicates that an HTML element is to be moved. Here the cursor is usually rendered as a double arrowhead cross. You will need to the accompany CSS rule (style sheet) with script (JavaScript) in order to make the element move. Try the following code and move the mouse pointer over the paragraph element:

p {width:30%; cursor:move}

This is a paragraph.

This is a paragraph.

This is a paragraph.

text
This value is used to indicate text that can be selected. It is often rendered as an I-bar. Under default conditions you would not need to use the CSS Cursor Property and its values for your web page. However, if you were really looking for a customized web page, then you would need the property and its values.

When the mouse pointer goes over a hyperlink element is has the shape of a hand. If you know that your user will recognize a phrase as a hyperlink, and you want him to know that he can select the text (content) of the hyperlink, then use the cursor text value for this. Try the following code. Move the mouse pointer over the content of the hyperlink and note that it is an I-bar (and not the expected hand). The link can still be clicked to load a different page. The code is not supported by all browsers:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

a {cursor:text}

I am selectable

wait
This value is used to indicate that the HTML element is busy running some script (JavaScript) and the user should wait until the completion of the script code. It is often rendered as a watch or hourglass. Try the following code:

p {width:30%; cursor:wait}

This is a paragraph.

This is a paragraph.

This is a paragraph.

help
This value indicates that when you click the HTML element, you will have help. The shape is often rendered as a question mark or a balloon. A good number of web pages today, use this. When you click the element, a pane can appear giving you more details or explanation about the element.

p {width:30%; cursor:help}

This is a paragraph.

This is a paragraph.

This is a paragraph.

url
If you do not like any of the above cursors (shapes) you can design your own; and save your cursor in the server. Then use the following cursor/value pair:

cursor : url("myImage.csr")

where the text in quotes is the URL of the cursor at the server.

Moving Edge and Corner Indicators
The following values indicate that some edge is to be moved. An HTML element is effectively a rectangle.

e-resize
This value indicates that the east edge of the rectangle is to be moved.
s-resize
This value indicates that the south edge of the rectangle is to be moved.
w-resize
This value indicates that the west edge of the rectangle is to be moved.
n-resize
This value indicates that the north edge of the rectangle is to be moved.
ne-resize
This value indicates that the north-east corner of the rectangle is to be moved.
nw-resize
This value indicates that the north-west corner of the rectangle is to be moved.
se-resize
This value indicates that the south-east corner of the rectangle is to be moved.
sw-resize
This value indicates that the south-west corner of the rectangle is to be moved.

Try the following code. The mouse pointer should have the e-resize shape (double-head arrow), only when it is on the right (east) border of the rectangle, but your result will not be exactly so. You will have the e-resize shape when the mouse pointer is on the right edge and on the content area of the Paragraph element. Let us hope that browsers will improve on this weakness with time.

p {width:30%; cursor:e-resize; border:solid 1px black}

This is a paragraph.

This is a paragraph.

This is a paragraph.

You need to accompany the above code with script in order to make the edge move.

Note: You can use all the above values for the HTML BODY element, but the browser may not support all the values.

That is it, for CSS Cursor. I hope you appreciated it.

Chrys