Using cursors with CSS

With the cursor property that we will see below we can change the appearance of the cursor over certain elements on our website; normally when we visit a website our cursor takes the shape of an arrow; but this changes when placing them on certain elements, for example, an input of type "text"; where it takes the form of text editing normally.

Cursors on the web with CSS

Using custom cursors in a web application can improve the end user experience; In this entry we will see how to use the cursors provided by CSS and custom cursors.

To use already predefined cursors we must place the value to the CSS property that we want; while with the custom cursor we must use an image as value, which will represent the cursor.

Basic CSS Cursor Syntax

With CSS we can set the type of cursor to use using the following syntax:

/*where 'cursor' is the property and 'value' is the value*/
cursor: value;

Basic CSS Cursors

Here we have some examples of cursors already defined by the operating system or the browser; some of them may not load; all depending on the operating system or browser you use; so be very careful when choosing one:

/*cursores por defecto*/
.alias           { cursor: alias; }
.auto            { cursor: auto; }
.cell            { cursor: cell; }
.copy            { cursor: copy; }
.context-menu    { cursor: context-menu; }
.crosshair       { cursor: crosshair; }
.default         { cursor: default; }
.help            { cursor: help; }
.move            { cursor: move; }
.none            { cursor: none; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.wait            { cursor: wait; }

.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; }

.e-resize        { cursor: e-resize; }
.n-resize        { cursor: n-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; }

Custom cursors with CSS

To establish our own (custom) cursors, it is enough to indicate the URL of the image that our cursor will represent; multiple URLs can be given so that CSS tries to load multiple images; if the first image of the pointer is not loaded (for example, the cursor does not exist) or is not supported by the browser, it goes to the next image; Let's see an example:

/*custom cursors*/
.pointer-custom {
   cursor: url(pointer-custom.gif),
   url(pointer-custom.png), pointer
}
pointer-custom 

Conclusions

In conclusion, it is one more option that we have to improve the visitor experience in our application; but always keep in mind that the cursor to choose should not be too different from the already standard ones if you want your application to be easy to use.