1. Computing

Discuss in my forum

CSS Cursors

How to Change the Cursor with CSS

By

A fun thing that CSS allows you to change on your web pages is the cursor. There are over 30 different built-in cursors in CSS 3, and most of them are supported in the major browsers.

For the below examples, I tested in Firefox 2, Internet Explorer 7, and Opera 9. Keep in mind, as well, that the below examples are done on links, but you can change the cursor over any element on your Web page, not just links.

The Default Cursors

These are the cursors we're all used to. If you do nothing to the cursor property in your CSS, then the browser will decide how the cursor should display. It defaults to things like an I-bar for text, a pointer or hand for links, and an arrow by default. It's good to know these cursor options, so that you can change elements of your site back to normal if necessary.

<a href="#" style="cursor: auto;">cursor: auto;</a>

Auto tells the browser to do whatever it would normally do in this situation. It's like a "reset to defaults" option for your cursor.

<a href="" style="cursor: default;">cursor: default;</a>

Default often confuses people, because this seems like it should be the "reset" option. But instead, it's the cursor that is used when there is no specific cursor assigned. For most computers this is an arrow.

<a href="" style="cursor: none;">cursor: none;</a>

None tells the browser to display no cursor at all. This was not supported in any of the browsers I tested.

Try Out the Default Cursors

Basic Cursors

The basic cursors are found on most computers, and are familiar to most Web surfers. If you use these cursors on your Web pages, your customers will know what you're telling them.

<a href="" style="cursor: help;">cursor: help;</a>

The help cursor adds a question-mark and lets the viewer know that additional information will be provided by this element. When I work on other sites, I like to use this cursor on definitions inside text documents - to indicate that the link is different from a standard link.

<a href="" style="cursor: pointer;">cursor: pointer;</a>

This is sometimes called the "hand" cursor because that's how most browsers display it. In fact, some browsers support cursor: hand; as well as pointer. It is usually used on links.

<a href="" style="cursor: progress;">cursor: progress;</a>

When something is loading or in progress, this cursor shows up. You can use it with your DHTML or Ajax to let your customers know that something is happening.

<a href="" style="cursor: wait;">cursor: wait;</a>

Similar to progress, wait is an hourglass and tells the viewer they need to wait. Some computers animate the hourglass.

<a href="" style="cursor: crosshair;">cursor: crosshair;</a>

The crosshair cursor is used in a lot of graphics programs to show pinpoint accuracy.

Text Cursors

Text cursors indicate that something regarding text is going on. Things like copying, moving, or selecting text is possible when these cursors are visible.

<a href="" style="cursor: text;">cursor: text;</a>

The most basic text cursor. This tells the viewer that the text can be selected.

<a href="" style="cursor: vertical-text;">cursor: vertical-text;</a>

The vertical-text cursor is only supported by Firefox and Internet Explorer.

<a href="" style="cursor: alias;">cursor: alias;</a>

The alias cursor is only supported by Firefox.

<a href="" style="cursor: copy;">cursor: copy;</a>

The copy cursor is only supported by Firefox.

<a href="" style="cursor: move;">cursor: move;</a>

The move cursor is for more than just text. It indicates that the selected element can be moved.

<a href="" style="cursor: no-drop;">cursor: no-drop;</a>

The no-drop cursor tells the customer that the element cannot be placed there. It looks slightly different in Firefox than in IE.

<a href="" style="cursor: not-allowed;">cursor: not-allowed;</a>

The not-allowed cursor is a little more generic than the no-drop. It just says that whatever is being tried is not allowed.

Resize Cursors

Resize cursors are the little arrow icons that show up on the edges of elements to say they can be resized. There are a lot of them, and not all are supported by anything but Firefox. Plus, the browsers tend to display similar ones (like e-resize and w-resize) the same. The resize icons are:

  • e-resize
  • n-resize
  • ne-resize
  • nw-resize
  • s-resize
  • se-resize
  • sw-resize
  • w-resize

The below are only supported by Firefox. They are part of CSS 3 and may be dropped before CSS 3 is finalized.

  • ew-resize
  • ns-resize
  • nesw-resize
  • nwse-resize

Table Cursors

The table cursors are cursors that are typically found in spreadsheets—tabular data.

<a href="" style="cursor: context-menu;">cursor: context-menu;</a>

The context-menu cursor didn't change in any of the browsers I tested.

<a href="" style="cursor: cell;">cursor: cell;</a>

The cell cursor indicates a cell of tabular data. It's only supported by Firefox.

<a href="" style="cursor: col-resize;">cursor: col-resize;</a>

The col-resize cursor indicates that the column can be resized. It is only supported in Firefox and Internet Explorer.

<a href="" style="cursor: row-resize;">cursor: row-resize;</a>

The row-resize cursor indicates that the row can be resized. It is only supported in Firefox and Internet Explorer.

<a href="" style="cursor: all-scroll;">cursor: all-scroll;</a>

The all-scroll cursor indicates that the data can be pushed around in any direction. It looks slightly different between Firefox and Internet Explorer.

Custom Cursors

Custom cursors are what most people are looking for when they want to change the cursor. Unfortunately, at this time they are only readily supported by Internet Explorer. Firefox and Opera don't support the "url()" option on the cursor property.

<a href="" style="cursor: url(redball.cur);">cursor: url(redball.cur);</a>

If you really must have a custom cursor in Firefox, you can use JavaScript to force it. This script from Dynamic Drive should help you generate a custom cursor in all browsers that visit your site.

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Cascading Style Sheets
  5. Style Properties
  6. CSS cursor Property - Change the Cursor with CSS

©2014 About.com. All rights reserved.