Mouse Cursors may vary depending upon what operating system you are using (macOS, Windows, or Unix flavors) as well as the Browser type and version (Chrome, Safari, Firefox, Opera). But do you know as a web developer that there are about 32+ websafe mouse cursor options that are available in CSS that you can use for your website? The CSS property name is the cursor.
Let's see each of the 32 Different cursor types we have
- Default Cursor :
The default cursor is the normal cursor that you see, depending on the operating system it may differ (for Google Chrome, Mac OS X has a pointer arrow that's black in color with a white border, whereas on Windows 8 the cursor is white in color with black border). If you want to use this cursor type then use cursor:default in the style of the element.
- Auto Cursor :
This kind of cursor is is determined by the UA (User-Agent) depending upon the content on which the mouse is currently. The web browser determines the cursor to display based on the current context. E.g. equivalent to text when hovering text.
- Crosshair Cursor :
You will see a cross kind of pointer when you use this type of cursor, this cursor type is usually used when you have to crop some image. cursor:crosshair is the CSS property that you must use.
- Move Cursor :
This type of cursor is usually used when you want to drag/move something on a webpage, say you have an avatar image that the user can move to fit the exact portion of the image he/she wants to be in the frame. It looks similar to a cross-hair cursor, except that it has arrows at all four ends. The CSS property for this is cursor:move.
- Pointer Cursor :
This cursor looks like a hand with a pointing finger (on the Mac OS X its a hand with a white glove on it seems :D), this cursor is usually displayed when you have a hyperlink. When you hover over any link on a page you would see this cursor to indicate that its a hyperlink.
- Text Cursor :
This cursor is usually displayed when you hover over some text content on the page, it is usually displayed as a I-beam indication the user that the text can be selected (any yes copied to clip-board)
- Wait Cursor :
This cursor is displayed when the page is waiting for some resource to get loaded. This is displayed as an hourglass on Windows OS and as a colorful circular spinning pinwheel.
- Help Cursor :
This cursor is displayed as a question mark or a balloon. When displayed it indicates that help is available for the content.
- Progress Cursor:
This may look similar to wait for cursor, but it's different as it is used to indicate the progress of something. It is usually displayed as a animated spinning beach ball or a pinwheel or an arrow with a watch or an hourglass.
- e-resize Cursor
This cursor is an Indicator that you can resize or move something in East direction of the Screen. Its an arrow pointing towards the east direction.
- w-resize Cursor
This cursor is an Indicator that you can resize or move something in the West direction of the Screen. Its an arrow pointing towards the west direction.
- s-resize Cursor
This cursor is an Indicator that you can resize or move something in the South direction of the Screen. Its an arrow pointing towards the south direction.
- n-resize Cursor
This cursor is an Indicator that you can resize or move something in the North direction of the Screen. Its an arrow pointing towards the north direction.
- ne-resize Cursor
This cursor is an Indicator that you can resize or move something in North-East direction of the Screen. Its an arrow pointing towards the north-west direction.
- nw-resize Cursor
This cursor is an Indicator that you can resize or move something in the North-West direction of the Screen. Its an arrow pointing towards the north-west direction.
- se-resize Cursor
This cursor is an Indicator that you can resize or move something in the South-East direction of the Screen. Its an arrow pointing towards the South-East direction.
- sw-resize Cursor
This cursor is an Indicator that you can resize or move something in the South-West direction of the Screen. Its an arrow pointing towards the South-West direction.
- not-allowed Cursor :
This cursor is displayed on objects where some operations like copy, move, drag or drop is not allowed, it is usually displayed as an arrow having a circle with a stroke.
- no-drop Cursor :
This cursor is displayed when the drop feature is not allowed on an object. It may look similar to the not allowed cursor type.
- vertical-text Cursor :
This looks similar to text cursor except it displays the I-beam horizontally to indicate that the text which is displayed horizontally can be selected.
- all-scroll Cursor :
This cursor indicates that scrolling in all directions is possible, usually displayed when you click on the mouse wheel button, indicates that you can move the mouse in all directions and the page will scroll in that direction.
- Column resize Cursor :
This cursor indicates that a particular column is re-sizable, usually displayed when you place the cursor at the edge of the column.
- Row resize :
This is similar to Column resize Cursor but used to indicate that the row is re-sizable.
- URL Cursor :
This cursor doesn't seem to work on Mac OS X, it is used to display image along with the cursor pointer.
- Grab Cursor
This cursor indicates that something can be grabbed.
- Grabbing Cursor
This cursor indicates that something is being grabbed.
- Zoom in Cursor :
This indicates that Zoom in option is available or activated for an element like an image on a webpage. It is displayed as a magnifying glass with a plus + sign.
- Zoom out Cursor :
This indicates that Zoom out option is available or activated for an element like an image on a webpage. It is displayed as a magnifying glass with a minus - sign.
- Cell Cursor :
This cursor is displayed as a thick + symbol (the one you see in excel sheets) it indicates that cells can be selected.
- Alias Cursor :
This cursor type indicates an alias or shortcut is to be created.
- Copy Cursor :
It indicates that the current object can be copied. It is displayed as a green circle with a plus sign on the Mac OS X.
- Context Menu Cursor :
It indicates that a context menu is available under the cursor. Note on Windows it is available on ie10 or above.
- Horizontally Center Align tag in HTML using CSS
- align image at middle of div element
- Add scroll to div element in HTML Css
- List of 32 CSS cursors web developers must know about
- How to make div or text in html unselectable using CSS
- How to Center Align Image in Bootstrap
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- How to make jsfiddle bootstrap ready
- reCAPTCHA Implementation Tutorial
- How to place two div elements next to each other
- CSS: Apply opacity only for div background and not textMore Posts:
- NOTE: This project contains resource errors, so aapt did not succeed, which can cause rendering failures. Fix resource problems first. - Android
- Eclipse : This version of the rendering library is more recent than your version of ADT plug-in. Please update ADT plug-in - Eclipse
- Android Development - How to switch between two Activities - Android
- SharePoint Server 2016 error Microsoft Office Online Server 2016 cant be installed on the same machine as a Microsoft SharePoint Server product - SharePoint
- AlertDialog with single button example : Android - Android
- Android : Remove ListView Separator/divider programmatically or using xml property - Android
- Eclipse : Workspace was written with an older version of the product and will be updated - Eclipse
- How to install homebrew (brew) on M1 Mac - MacOS
- Mac OS X Taking Screen Capture using Terminal - Mac-OS-X
- Microsoft Teams meeting Full Screen mode option missing - bring it back - Teams
- Enable Dark Mode in Gmail Desktop Browser - Google
- How to turn on channel notifications for Microsoft Teams - Teams
- PHP Script to Upload Images to Server - PHP
- Android Error Generating Final Archive - Debug Certificate Expired - Android
- [Fix] Steam: Friends Network Unreachable Error - HowTos
- How to get list of all Java versions installed on macOS - Java
- How to know if someone has read your WhatsApp message - WhatsApp
- Best Free Gif screen capture app now available for M1 Chip Mac - LICECap - MacOS
Have Questions? Post them here!