32 css cursors web developers must know


Posted on : Thu, 30th Apr 15 02:27 pm (Updated on : Thu, 30th Apr 15 02:27 pm) UTC
Author : Code2care
2314 votes

Mouse Cursors may vary depending upon what operating system you are using (Mac OS X , Windows or Unix flavours) 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+ web safe mouse cursor options that are available in css that you can use for your website. The css property name is cursor.

Let's see each of the 32 Different cursor types we have :

  1. 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 white border, where as 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.

    Image : Cursor Types in CSS

  2. Auto Cursor :

  3. 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.


    Image : Auto Cursor type : css property : cursor:auto

  4. 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.


    Image : Crosshair cursor type : css property : cursor:crosshair

  5. 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 want to be in the frame. It looks similar to crosshair cursor, except that it have arrows at all four ends. The css property for this is cursor:move.


    Image : Move Cursor type : css property : cursor:move

  6. Pointer Cursor :

    This cursor looks like a hand with a point 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.


    Image : Pointer Cursor : css property : cursor:pointer

  7. 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)


    Image : Text cursor : css property : cursor:text

  8. Wait Cursor :

    This cursor is displayed when the page is waiting for some resource to get loaded. This is displayed as a hourglass on Windows OS and as a colorful circular spinning pinwheel.


    Image : Wait cursor : css property : cursor:wait

  9. Help Cursor :

    This cursor is displayed as a question mark or a balloon.When displayed it indicates that help is available for the content.


    Image : Help Cursor : css property : cursor:help

  10. Progress Cursor

    This may look similar to wait cursor, but its 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 with a watch or an hourglass.


    Images : Progress Cursor : css property : css:progress

  11. e-resize Cursor

    This cursor is an Indicator that you can resize or move something in East direction of the Screen. Its a arrow pointing towards the east direction.


    Images : e-resize Cursor : css property : css:e-resize

  12. w-resize Cursor

    This cursor is an Indicator that you can resize or move something in West direction of the Screen. Its a arrow pointing towards the west direction.


    Images : w-resize Cursor : css property : css:w-resize

  13. s-resize Cursor

    This cursor is an Indicator that you can resize or move something in South direction of the Screen. Its a arrow pointing towards the south direction.


    Images : s-resize Cursor : css property : css:s-resize

  14. n-resize Cursor

    This cursor is an Indicator that you can resize or move something in North direction of the Screen. Its a arrow pointing towards the north direction.


    Images : n-resize Cursor : css property : css:n-resize

  15. ne-resize Cursor

    This cursor is an Indicator that you can resize or move something in North-East direction of the Screen. Its a arrow pointing towards the north-west direction.


    Images : nw-resize Cursor : css property : css:nw-resize

  16. nw-resize Cursor

    This cursor is an Indicator that you can resize or move something in North-West direction of the Screen. Its a arrow pointing towards the north-west direction.


    Image : nw-resize cursor : css property : cursor:nw-resize

  17. se-resize Cursor

    This cursor is an Indicator that you can resize or move something in South-East direction of the Screen. Its a arrow pointing towards the South-East direction.


    Images : se-resize Cursor : css property : css:se-resize

  18. sw-resize Cursor

    This cursor is an Indicator that you can resize or move something in South-West direction of the Screen. Its a arrow pointing towards the South-West direction.


    Images : sw-resize Cursor : css property : css:sw-resize

  19. 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.


    Images : Not allowed cursor : css property : cursor:not-allowed

  20. no-drop Cursor :

    This cursor is displayed when drop feature is not allowed on a object. It may look similar to the not allowed cursor type.


    Image : No drop cursor : css property : cursor:no-drop

  21. 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.


    Image : Vertical text Cursor : css property : cursor:vertical-text

  22. 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.

    Image : all-scroll Cursor : css property : cursor:all-scroll

  23. Column resize Cursor :

    This cursor indicates that a particular column is resizable, usually displayed when you place the cursor at the edge of the column.


    Image : Column resize Cursor : css property : cursor:col-resize

  24. Row resize :

    This is similar to Column resize Cursor but used to indicate that the row is resizable.


    Image : Row resize cursor : css property : cursor:row-resize

  25. URL Cursor :

    This cursor doesn't seem to work on Mac OS X, it is used to display image along with the cursor pointer.
  26. Grab Cursor

    This cursor indicates that something can be grabbed.


    Image : Grab cursor : css property : cursor:grab

  27. Grabbing Cursor

    This cursor indicates that something is being grabbed.


    Image : grabbing cursor : css property : cursor:grabbing

  28. Zoom in Cursor :

  29. This indicates that Zoom in option is available or activated for a element like image on a webpage. It is displayed as a magnifying glass with a plus + sign.


    Image : zoom-in cursor : css property : cursor:zoom-in

  30. Zoom out Cursor :

  31. This indicates that Zoom out option is available or activated for a element like image on a webpage. It is displayed as a magnifying glass with a minus - sign.


    Image : zoom-out cursor : css property : cursor:zoom-out

  32. Cell Cursor :

    This cursor is displayed as a thick + symbol (one you see in excel sheets) it indicates that cells can be selected.


    Image : Cell Cursor : css property : cursor:cell

  33. Alias Cursor :

    This cursor type indicates an alias or shortcut is to be created.


    Image : Alias Cursor : css property : c

  34. 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.


    Image : Copy Cursor : css property : conte

  35. Context Menu Cursor :

    It indicates that a context menu is available under the cursor. Note on Windows it is available on ie10 or above.


    Image : Context Menu Cursor : css property : cursor:context-menu

Code2care's mission is to share varied knowledge in technical and non-technical areas gathered during day-to-day learnings and development activities so that our visitors can leverage this portal to find solutions to their queries without re-inventing the wheel. Technical posts include Learnings, Tutorials, Video Tutorials, Code Snippets, Tips-n-tricks.

Follow us : Facebook - Twitter - Google +