HTML | DOM Style cursor Property

The cursor property is used in HTML DOM to set or return the type of cursor to display for the mouse pointer.

Syntax:

  • Return the cursor property:
    object.style.cursor
  • Set the cursor property:

    object.style.cursor=value

Property Values:

  • alias: This property is used to display the cursor’s indication of something is to be created.
  • all-scroll: In this property, the cursor indicates scrolling.
  • auto: This is the default property where the browser sets a cursor.
  • cell: In this property, the cursor indicates a cell or set of cells are selected.
  • context-menu: In this property, the cursor indicates that a context menu is available.
  • col-resize: In this property, the cursor indicates that the column can be resized horizontally.
  • copy: In this property, the cursor indicates something is to be copied.
  • crosshair: In this property, the cursor renders as a crosshair.
  • default: The default cursor.
  • e-resize: In this property, the cursor indicates an edge of a box is to be moved to the right.
  • ew-resize: In this property, the cursor indicates a bidirectional resize cursor.
  • help: In this property, the cursor indicates that help is available.
  • move: In this property, the cursor indicates something is to be moved
  • n-resize: In this property, the cursor indicates an edge of a box is to be moved up.
  • ne-resize: In this property, the cursor indicates an edge of a box is to be moved up and right.
  • nesw-resize: This property indicates a bidirectional resize cursor.
  • ns-resize: This property indicates a bidirectional resize cursor.
  • nw-resize: In this property, the cursor indicates an edge of a box is to be moved up and left.
  • nwse-resize: This property indicates a bidirectional resize cursor.
  • no-drop: In this property, the cursor indicates that the dragged item cannot be dropped here.
  • none: This property indicates no cursor is rendered for the element.
  • not-allowed: In this property, the cursor indicates that the requested action will not be executed.
  • pointer: In this property, the cursor is a pointer and indicates link
  • progress: In this property, the cursor indicates that the program is busy.
  • row-resize: In this property, the cursor indicates that the row can be resized vertically.
  • s-resize: In this property, the cursor indicates an edge of a box is to be moved down.
  • se-resize: In this property, the cursor indicates an edge of a box is to be moved down and right.
  • sw-resize: In this property, the cursor indicates an edge of a box is to be moved down and left.
  • text: In this property, the cursor indicates text that may be selected.
  • URL: In this property a comma-separated list of URLs to custom cursors and a generic cursor at the end of the list.
  • vertical-text: In this property, the cursor indicates vertical-text that may be selected.
  • w-resize: In this property, the cursor indicates an edge of a box is to be moved left.
  • wait: In this property, the cursor indicates that the program is busy.
  • zoom-in: In this property, the cursor indicates that something can be zoomed in.
  • zoom-out: In this property, the cursor indicates that something can be zoomed out.
  • initial: This property is used to set to its default value.
  • inherit: Inherits from its parent element.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style cursor Property
    </title>
    <style>
        .wait {
            cursor: wait;
        }
          
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <center>
  
        <h1>GeeksforGeeks</h1>
        <p id="myP">
          Mouse over this text before and 
          after you have clicked the button below!
        </p>
  
        <button type="button"
                onclick="myFunction()">
          Change cursor
        </button>
  
        <script>
            function myFunction() {
                document.getElementById(
                  "myP").style.cursor = "pointer";
            }
        </script>
    </center>
</body>
  
</html>

chevron_right


Output:

Supported Browsers: The browser supported by HTML | DOM Style cursor Property are listed below:

  • Google Chrome
  • Edge
  • Mozilla Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.