Cursor properties

cursor properties will control how will the mouse cursor look on the screen. A basic example usage looks like this: cursor: pointer.

We can always control how the cursor look from a predefined values it has. 

h1{
  cursor: pointer;
}

p{
  cursor: move;
}

img {
  cursor: url('custom_cursor.jpg'), auto;
}


In the above snippet, we are controlling how the cursor will look along the entire dimension of h1 or p elements.
On h1 element, it will look like pointer while on p it will look like move.

For understanding the whole cursor values and how each one looks, you need to official docs

Althought we have a lot of options for cursor values but what if we want a particular image or specific icon to be our cursor value.
In that scenario we can set it with an url() function along with image or icon path inside the function. And second value separated by comma is the default cursor value (i.e arrow) which is a fallback value in case the image or icon is not read by browser.

Possible usage of cursor property is on a html button element that looks something like a pointer to indicate to user that it is clickable. Another use case is an anchor tag, radiobox or checkbox.

Have a look at the below snippet for possible usages:: 

button{
  cursor: pointer;
}

a{
  cursor: pointer;
}

input[type="checkbox"]{
  cursor: pointer;
}

input[type="radio"]{
  cursor: pointer;
}
Prev