Web Development optimize

CSS 101: Styling the cursor


CSS allows you to control the appearance and layout of every aspect of a Web page -- this includes everything from fonts to margins to the cursor. That's right, beginning with CSS 2.1, you can easily control the cursor used when a user browses a Web page.

The standard CSS cursor is an arrow, and it usually meets the requirements of a page or site, but there are times when you may want to use another cursor. In these situations, the CSS standard provides numerous options.

CSS cursor types

The following list provides an overview of some of the cursor types available in the CSS standard.

  • default: The standard arrow is used.
  • hand: A hand with the index finger outstretched.
  • pointer: The same as the hand selection.
  • crosshair: A cross hair (a plus sign) is used.
  • move: A crosshair with arrows at the end of each line. This is the same cursor used in Windows when a window is moved.
  • text: An I-beam is used for the cursor (capital i).
  • wait: An hourglass is used.
  • help: A question mark is used.
  • e-resize: The standard defines this as an arrow pointing eastward, but in most browsers, a horizontal line with arrows on each end is displayed.
  • w-resize: The standard defines this as an arrow pointing westward, but in most browsers, a horizontal line with arrows on each end is displayed.
  • ne-resize: The standard defines this as an arrow pointing northeastward, but in most browsers, a diagonal line with arrows on each end is displayed.
  • nw-resize: The standard defines this as an arrow pointing northwestward, but in most browsers, a diagonal line with arrows on each end is displayed.
  • se-resize: The standard defines this as an arrow pointing southeastward, but in most browsers, a diagonal line with arrows on each end is displayed.
  • s-resize: The standard defines this as an arrow pointing down or south, but in most browsers, a vertical line with arrows on each end is displayed.
  • sw-resize: The standard defines this as an arrow pointing southwestward, but in most browsers, a diagonal line with arrows on each end is displayed.
  • n-resize: The standard defines this as an arrow pointing up or north, but in most browsers, a vertical line with arrows on each end is displayed.
  • progress: An hourglass is used.
  • not-allowed: A circle with a diagonal line is displayed.
  • no-drop: A hand with the not-allowed type to the right of it is used.
  • vertical-text: A horizontal I-beam is displayed.
  • all-scroll: Four arrows with a dot in the middle is used.
  • col-resize: Two parallel vertical lines with a horizontal arrow over it is displayed just like resizing a column in Microsoft Excel.
  • row-resize: Two parallel horizontal lines with a vertical arrow over it is displayed just like resizing a row in Microsoft Excel.
  • url(uri): This type allows you to use a custom cursor defined in an external file passed as the uri.

The values from the previous list are used, along with the cursor property of an element. The following line shows how it may be used with the style attribute of an HTML element.

style="cursor: hand;"
As with other CSS properties, you may define a cursor for the entire page or individual elements on the page. The HTML example in Listing A uses a different cursor for the various page elements.

<html><head>

<title>Using the CSS cursor property</title>

</head>

<body style="cursor: all-scroll;">

<h1 style="cursor: hand;">Title of the page</h1>

<h2 style="cursor: crosshair;">Subtitle</h2>

<p style="cursor: move;">Some text goes here.</p>

<a href="http://www.news.com/" style="cursor: wait;">Read the news</a>

<br><br>

<a href="http://www.techrepublic.com/" style="cursor: help;">TR</a>

</body></html>

The example attaches a cursor to the whole document via the style attribute of the body element, but individual elements on the page have their own assigned cursors as well, so the cursor changes from the page's cursor (from the body element) to the individual element's cursor as the user moves around the page. The next example in Listing B shows how you can style the cursor according to class or element type.

<html><head>

<title>Using the CSS cursor property</title>

<style type="text/css">

body {cursor: all-scroll;}

p {cursor:move;}

a {cursor:crosshair;}

.headers {cursor:hand;}

</style></head>

<body>

<h1 class="headers">Title of the page</h1>

<h2 class="headers">Subtitle</h2>

<p>Some text goes here.</p>

<a href="http://www.news.com/">Read the news</a>

<br><br>

<a href="http://www.techrepublic.com/">TR</a>

</body></html>

Do not overuse CSS cursors

While the previous example was for instructional purposes, it illustrates how using various cursors within a page can be confusing. Users like sites to perform as expected, so use alternate cursors sparingly. A good example of using a cursor type other than the default is using the help value when the user hovers over a help button or link. While the standard values are good, you may use a custom cursor as well.

One important aspect of working with cursors via CSS is the default pointer is always available. Browser support began with Netscape 4 and Internet Explorer 6, but you should test thoroughly. This is important if you utilize a cursor value that is not supported by the user's browser. In this case, the default cursor will be displayed, so the user experience is not affected.

Manipulating the CSS cursor property via JavaScript

The cursor property of an element is easily accessible and manipulated via JavaScript using the following syntax:

element.style.cursor="cursor_value";
You can use this syntax along with the various available events or in other JavaScript on the page. The example in Listing C uses the onFocus event for the last link on the page and the onSelectStart event for the body portion of the page (when the user selects something on the page with the mouse). Certain cursors are displayed when the events are fired as defined in the JavaScript associated with each event.

<html><head>

<title>Using the CSS cursor property</title>

<style type="text/css">

body {cursor: all-scroll;}

p {cursor:move;}

.headers {cursor:hand;}

</style>

</head>

<body onSelectStart="this.style.cursor='not-allowed'; return false;">

<h1 class="headers">Title of the page</h1>

<h2 class="headers">Subtitle</h2>

<p>Some text goes here.</p>

<a href="http://www.news.com/">Read the news</a>

<br><br>

<a href="http://www.techrepublic.com/" onFocus="this.style.cursor='text'; return

false;">TR</a>

</body></html>

More options

CSS provides so many options when developing Web applications. A developer can control page elements via CSS, standard HTML, JavaScript, or a combination of these standards. Controlling the cursor is just one of the options that is easily controlled as the CSS standard defines, but you should use it sparingly.

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton's column.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

---------------------------------------------------------------------------------------

Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

4 comments
Jerry M. Gartner
Jerry M. Gartner

The help cursor is particularly useful when mousing over acronym and abbreviation elements. In addition to a dashed bottom border, it gives people an indication that more information is available. BTW, by default, Mozilla based browsers render a dotted line under acronym and abbreviation elements but IE does not. Adding a dashed bottom border, in addition to the help cursor to these elements via css will give IE users a cue that something is even there. Look at the word "RSS" (right after the 4th bullet point)in the first article at the top of the page on http://www.gartnerwebdev.com for an example.

Elvis.Is.Alive
Elvis.Is.Alive

It would be nice if the article listed the browsers which have implemented CSS 2.1. As we web developers all know, anytime a technology is mentioned pertaining to web-based interface instruments, it is useless unless we know the browser which will support them.

ambientNRG
ambientNRG

cursor:hand is IE specific whereas cursor:pointer is in the CSS2 standard