Lenetek Blog

How to change a mouse cursor shape on a webpage and on a computer screen

Perhaps you have noticed an unusual mouse cursor on this page. If not, try moving your mouse around.

A cursor is a static or animated image indicating the position on a computer monitor or other display device that responds to input from a keyboard or pointing device such as a mouse. The term "mouse cursor" is used interchangeably with "mouse pointer" or just "cursor". In many Graphic User Iinterfaces (GUI), the mouse cursor changes shape depending on the circumstances. For example:

  • Over text that the user can edit or select, the cursor changes to an Cursor Text shape.

  • Graphics-editing applications use cursor shapes such as brush, pencil or paint bucket indicating active function when the user edits an image.

  • At an edge or corner of a window the cursor usually changes into a double arrow (horizontal, vertical, or diagonal) indicating that the user can drag the edge/corner in the indicated direction in order to re-size the window.

  • While a computer process is in progress and cannot accept user input, a wait cursor, New Wait cursor or Old Wait cursor is displayed when the mouse points to the corresponding window.

  • When the cursor hovers over a hyperlink, it changes into a hand Hyperlink cursor.

Changing a mouse cursor on a web page

To change a mouse cursor shape in a webpage, a cursor property of a style element can be used as specified in the Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. This can be done either within a CSS or as HTML inline style declaration.

The cursor property is supported by all major web browsers. However, not all the cursor values are supported by all browsers. You may move you mouse over the right column of the table below to see if and how your browser supports them.

Example 1 of using the cursor property defined in CSS:

a) In CSS define element, id or class selector:

.cursor_shape1 {cursor: cursor_property_value1}
.cursor_shape2 {cursor: cursor_property_value2}

b) In HTML, use it in <div>, <span>, <p>, or any other HTML element:

<div class="cursor_shape1">
...
</div>
<div class="cursor_shape2">
...
</div>

Example 2 of using the cursor property in the HTML inline style declaration:

<div style="cursor: cursor_property_value">
...
</div>

You can apply the cursor property style to the <body> tag in order to change it for the whole page:

<body style="cursor: cursor_property_value">

The following table lists valid values of the cursor property (as of CSS2.1). It also illustrates how the mouse pointer (cursor) changes its shape (if your browser supports it) when you point your mouse over the rows in the right column:

Cursor shape Cursor Pproperty Value Example of style declaration
  auto The User Agent determines the cursor to display based on the current context.
Default cursor shape default style="cursor: default;"
Pinter cursor shape pointer + hand style="cursor: pointer; cursor: hand;"
Crosshair cursor shape crosshair style="cursor: crosshair;"
Text cursor shape text style="cursor: text;"
New Wait cursor or Old Wait cursor shape wait style="cursor: wait;"
Help cursor shape help style="cursor: help;"
Move cursor shape move style="cursor: move;"
Horizontal resize cursor shape e-resize style="cursor: e-resize;"
Slash resize cursor shape ne-resize style="cursor: ne-resize;"
Backslash resize cursor shape nw-resize style="cursor: nw-resize;"
Vertical resize cursor shape n-resize style="cursor: n-resize;"
Progress cursor shape progress style="cursor: progress;"
Alt scroll cursor shape all-scroll style="cursor: all-scroll;"
Column resize cursor shape col-resize style="cursor: col-resize;"
No drop cursor shape no-drop style="cursor: no-drop;"
Not allowed cursor shape not-allowed style="cursor: not-allowed;"
Row resize cursor shape row-resize style="cursor: row-resize;"
Vertical Text cursor shape vertical-text style="cursor: vertical-text;"
Custom cursor shape url( ) style="cursor: url(mycursor.cur),auto;"

For the url( ) cursor property, only .cur and .ani file types are supported as of IE6. You can find an extensive library of free mouse cursors at the Open Cursor Library. Both, static (.cur) and animated (.ani) cursor types are present in this library. For newer browsers, .gif and .png files are also supported.

Changing a mouse cursor on a computer desktop

  1. Go to Start → Settings → Control Panel

  2. Double click the Mouse icon

  3. Click on the "Pointers" tab and then on "Browse..." button:
    Browse for mouse pointers

  4. Now you can select a cursor from a list of the Widows-supplied .cur files:
    Select cursor

  5. Even better, you can download additional .cur and/or .ani files and place them in the Cursors folder so you can select them in the previous step. To find the location of the Cursor folder, click on "Look in" drop-down box:
    Location of the Cursor folder
    Here, it shows that the Cursor folder is located under the C:\WINNT folder.

  6. You can also create your own cursors using various Graphics software. For example, you can try this free and user-friendly software JustCursors which allows creating both .cur and .ani image files.

☆☆☆☆☆

Post a comment

Your email is never published nor shared.