CSS Mouse Cursor

Cascading Style Sheets or CSS allow you to define the unique style of your webpage through different attributes and selectors. With CSS, you may alter the fonts, place borders, and even make a basic web page layout of your own. There are many ways you can customize with CSS, including layouts, text colors, background colors, and so on. Another unique feature of CSS customization is that you can change the look of your cursors and mouse pointers on your webpage.

Changing Your Site’s Cursor with CSS

CSS features a style property, cursor, which lets you change what the cursor on your web page looks like. In an ordinary web page, as you point your mouse pointer over any standard text, you will see one cursor that is normally an I-beam. And when the mouse pointer goes over a link, another pointer appears, usually a hand. If you do not want to use those, you can definitely change them.

Using the Cursor Style Property

You will find a number of different styles of cursors to use. However, if you do not know what they look like exactly or how they will work in different browsers, it will be difficult to use them. For instance, if you want to use CSS to change the cursor on your web page, you would write:

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

Different Cursors to Choose from:

  • crosshair
    Display a simple crosshair, which looks like a +-sign.
  • default
    Display the platform-dependant default cursor, which is usually an arrow.
  • pointer
    Display a pointer which specifies a link.
  • move
    Display a cursor indicating that something has to be moved.
  • e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
    Display a cursor that indicates an edge that should be moved.
  • text
    Display a cursor for any standard text to be selected, usually an I-beam.
  • wait
    Display a wait cursor, which is typically an hourglass.
  • help
    Display a help cursor that is normally with a question mark or balloon.
  • progress
    Display a progress indicator symbolized by a spinning ball or hourglass.
  • inherit
    The element must have an identical cursor setting as the parent.

Importance of Changing Your Cursor

It can be useful to actually change the cursor on your web page. First of all, varying cursors will tell people whether something is clickable or not clickable. In addition, it can make your web applications more functional, like when you have a drag-and-drop in a move cursor.