Html cursor | Get to Know About the 5 HTML Cursor Properties

Html cursor | Get to Know About the 5 HTML Cursor Properties

html cursor | Get to Know About the 5 HTML Cursor Properties

Hey friends, today I'll explain the 5 most common and useful HTML Cursor properties. Before we dive in, I'll introduce myself. I'm CodingPorium and I make coding tutorials and provide Free Source Code. Do check out my YouTube channel here or by searching for CodingPorium on YouTube for more!

About Cursor

Before we enter this tutorial, I understand some might feel confused about what is a cursor even though it is actually something that you see every time on your laptop/PC. The cursor is the arrow/icon that is always appearing when you hover over your mouse or trackpad. Here's an image to show a better visualization.

html cursor | Get to Know About the 5 HTML Cursor Properties

In HTML, we can customize what type of cursor we want the user to have when they hover or click on an HTML element. The importance of cursor property is so that we can help the user identify easily and understand what action to take when hovered on an HTML element. Let's see the first property.


1.  Cursor: all-scroll

This cursor is commonly activated on the scroll bar of a page. For this property, use the following code for the class of your HTML element.

cursor: all-scroll;

The output would be something like this:

html cursor | Get to Know About the 5 HTML Cursor Properties


2. cursor: cell

You might have felt familiar with the following cursor. This is because it's the cursor that's used by Microsoft Excel or Google Sheets when you hover or click on a cell. If you have never used Excel and never experienced this cursor, check out this video and also the image below.


html cursor | Get to Know About the 5 HTML Cursor Properties

The code is like this:

cursor: cell;

Okay, let's see the next property now.


3. cursor: col-resize

This property may be common in using Microsoft Powerpoint. You may have seen this cursor when trying to resize an image in Powerpoint or even in Microsoft Word. Here's how it looks like.


html cursor | Get to Know About the 5 HTML Cursor Properties

The code would be:

cursor : col-resize;

Now, the next property is common in buttons on websites.

4. cursor: pointer;

This cursor is common for indicating a button or a link that should be clicked by a user. Here's how it would look like when used:

html cursor | Get to Know About the 5 HTML Cursor Properties


The code would be:
cursor : pointer;


5. cursor: not-allowed

This type of cursor may be slightly familiar when hovering over some websites. For example, maybe when hovering on a section of a website which you're not allowed to click, fill in, or edit. Here's how this cursor looks like for you to get a better visualization:

html cursor | Get to Know About the 5 HTML Cursor Properties

The code for this is:

cursor: not-allowed;

And that's all for these cursor types. There are actually many more types of cursors in HTML. However, it's too many so decided to cover only the top 5 common cursors that you would probably use in your projects as a developer. 

Thank You!

Do contact me at codingporium.blogspot.com/p/contact.html or comment down below any doubts or suggestions you have. Do subscribe to my YouTube channel and do follow me on Instagram. I hope this post was useful and thanks to Code With Random for giving me the chance to write here and I hope to see you all in future posts. Goodbye!

Post a Comment

Previous Post Next Post