In this tutorial, we will see how to Change Cursor Style Using Its Properties In CSS. There is a lot of option to use those cursor for particular elements on your web page.

• Cursor
• Browser-Specific Cursors
• Custom Cursors

Cursor

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

In this tutorial, we’re going to see the CSS cursor property which, as you’d expect, allows you to change the cursor style as the mouse hover over an element. It’s become increasingly important for making user interact with the web application. As the cursor shows the sign and symbol to perform any action over an element.

let us see some styles for properties of the cursor.

.auto            { cursor: auto; }
.default         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

You can set your cursor style for any element that to be showed over a hover of an element.

See the Pen Properties of Cursors in CSS by rehmaanali (@geekstrick) on CodePen.

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

NOTE: Css Will Not Applyed On Mobile Browsers

Browser-Specific Cursors

Mozilla and some editions of Chrome and Safari offer a number of vendor-prefixed cursor styles which are likely to become part of the CSS3 specification:

.-moz-grab       { cursor: -webkit-grab; cursor: -moz-grab; }
.-moz-grabbing   { cursor: -webkit-grabbing; cursor: -moz-grabbing; }
.-moz-zoom-in    { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; }
.-moz-zoom-out   { cursor: -webkit-zoom-out; cursor: -moz-zoom-out; }

This are the WebKit for the browsers which have additional features in it as you can see in the demo

See the Pen Properties of Cursors in CSS – Browser-Specific Cursors by rehmaanali (@geekstrick) on CodePen.

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

NOTE: Css Will Not Applyed On Mobile Browsers

Custom Cursors

Finally, you can create your own cursor graphic, e.g.

.one {
   cursor:url(http://cursors2.totallyfreecursors.com/thumbnails/1pointer31.gif), auto; 
     }
.two { 
   cursor:url(http://cursors0.totallyfreecursors.com/thumbnails/1pointer51.gif), auto; 
     }
.three {
   cursor:url(http://www.cursor.cc/cursor/263/42/cursor.png), auto; 
     }

This will load the images from the link and shows as a cursor, Let’s see the demo

See the Pen Properties of Cursors in CSS – Graphic Cursor by rehmaanali (@geekstrick) on CodePen.

• Internet Explorer requires a Windows cursor file (.cur).
• Firefox, Chrome, and Safari require an image — I’d recommend a 24-bit alpha-transparent PNG.
• Firefox also requires a second non-URL cursor fallback value.
• It’s not supported in Opera.
• x and y are optional properties in Firefox, Chrome, and Safari which define the precise pointer position from the top-left of the graphic. If omitted, 0 0 is assumed.

Get Some More CSS Here!