CSS can control the styles of webpages maybe you know this but now in this tutorial, i am gonna tell you that how you can control the styles of your cursor when you are on a webpage

cursor property of CSS :}

cursor property helps a developer to change the style of a cursor when the cursor is hovering on a webpage it has various property and basically, for this article, i assume you know what is a cursor if don’t check here: What is a cursor

This property is quite useful when you are developing a large web app with lots of features, for example, an image editor or a CMS or something to edit text or you are writing a blog post like this LOL

and not only that cursor can have multiple styles you can watch them here as well on MDN DOCS I highly recommend that

Now Let’s start with the syntax

Syntax

The syntax is pretty similar is like of any other CSS property just with self-explanatory values

	p{
		cursor: value;
	}

So that’s about the syntax Let’s have a look at a few different most commonly used ones

cursor: auto;

This is the style and type of cursor which you get in a text editor

Just hover over the Box Down Below and you can clearly see how it looks like

auto

This is an auto-style this can be achieved by using the auto property of the cursor

Here is the code to achieve this property

	element{
		cursor: auto;
	}

Yeah just use this CSS code wherever you want this type of cursor

cursor: default

This property gives you a default cursor like in the box below just hover over it to see it

default

The property i used here is the default you can use it to achieve the same type of cursor in your web app just set the cursor property to default wherever you want it

Like this

	element{
		cursor: defualt;
	}

cursor: none

Let’s see the magic that how i can make you tensed by making your cursor invisible

Just hover down below

none

Seems good isn’t it so you can achieve the same by setting none to the cursor property

Here is the code you can use to achieve it

	element{
		cursor: none;
	}

Designing your own custom cursor

Yeah you heard it right even there are a lot of styles which are available by default for your cursor as well you can even design your own cursor sounds fun isn’t it

Like this

Custom I am felling quite

So is it looks awesome right you can achieve the same by using a small piece of code

Like this

//cursor : url(url of your choice )
cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png)

As now most of the browsers support SVG or png you can get rid of old cursors means even if you want you can give them a shot as well

and it will be quite fun to do so i highly recommend that you will enjoy it

One more thing to discuss here that it is the bad practice to do so it is also advised to add a fallback to your code in chance the old browsers will not support these as well and for that, you can check MDN DOCS for every other info you will need

Wrapping Up

These are the cursors which are enough to make you excited as well as i highly recommend you to check out other cursors as you need them in your project here at the MDN DOCS and if you like this post i highly recommend checking others as well inline vs inline-block