Open In App

CSS cursor Property

Improve
Improve
Like Article
Like
Save
Share
Report

The cursor property is used to specify the mouse cursor to be displayed while pointing on an element. This property is defined with zero or more <url> values that are separated by commas followed by 1 keyword value as mandatory & each <url> will point to the image file.

Syntax:  

cursor: value;

Property Values:

  • auto: This is the default property where the browser sets a cursor.
  • 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.
  • 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: This example illustrates the use of the cursor property & its value is set to wait which indicates that the program is busy.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS | cursor property </title>
    <style>
    .wait {
        cursor: wait;
    }
      
    h1 {
        color: green;
    }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <p>Mouse over the words to change the mouse cursor.</p>
  
        <p class="wait">wait</p>
  
    </center>
</body>
</html>


Output: 
 

Supported Browsers:

  • Google Chrome 1.0
  • Microsoft Edge 12.0
  • Mozilla Firefox 1.0
  • IE 4.0
  • Opera 7.0
  • Safari1.2


Last Updated : 11 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads