- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
Changing the look of Cursor using CSS
We can manipulate cursor image for different elements in a HTML document by using the CSS cursor property.
Syntax
The syntax of CSS cursor property is as follows:
Selector {
cursor: /*value*/
}Following are the values for CSS cursor property −
| Sr.No | Value & Description |
|---|---|
| 1 | alias It indicates an alias of something is to be created |
| 2 | all-scroll It indicates that something can be scrolled in any direction |
| 3 | auto It is default and the browser sets a cursor |
| 4 | cell It indicates that a cell (or set of cells) may be selected |
| 5 | context-menu It indicates that a context-menu is available |
| 6 | col-resize It indicates that the column can be resized horizontally |
| 7 | copy It indicates something is to be copied |
| 8 | crosshair It renders as a crosshair |
| 9 | default It renders the default cursor |
| 10 | e-resize It indicates that an edge of a box is to be moved right (east) |
| 11 | ew-resize It indicates a bidirectional resize cursor |
| 12 | grab It indicates that something can be grabbed |
| 13 | grabbing It indicates that something can be grabbed |
| 14 | help It indicates that help is available |
| 15 | move It indicates something is to be moved |
| 16 | n-resize It indicates that an edge of a box is to be moved up (north) |
| 17 | ne-resize It indicates that an edge of a box is to be moved up and right (north/east) |
| 18 | nesw-resize It indicates a bidirectional resize cursor |
| 19 | ns-resize It indicates a bidirectional resize cursor |
| 20 | nw-resize It indicates that an edge of a box is to be moved up and left (north/west) |
| 21 | nwse-resize It indicates a bidirectional resize cursor |
| 22 | no-drop It indicates that the dragged item cannot be dropped here |
| 23 | none No cursor is rendered for the element |
| 24 | not-allowed It indicates that the requested action will not be executed |
| 25 | pointer It is a pointer and indicates a link |
| 26 | progress It indicates that the program is busy (in progress) |
| 27 | row-resize It indicates that the row can be resized vertically |
| 28 | s-resize It indicates that an edge of a box is to be moved down (south) |
| 29 | se-resize It indicates that an edge of a box is to be moved down and right (south/east) |
| 30 | sw-resize It indicates that an edge of a box is to be moved down and left (south/west) |
| 31 | text It indicates text that may be selected |
| 32 | URL A comma separated list of URLs to custom cursors with a generic cursor mentioned at the end as a fail safe |
| 33 | vertical-text It indicates vertical-text that may be selected |
| 34 | w-resize It indicates that an edge of a box is to be moved left (west) |
| 35 | wait It indicates that the program is busy |
| 36 | zoom-in It indicates that something can be zoomed in |
| 37 | zoom-out It indicates that something can be zoomed out |
| 38 | initial It sets cursor property to its default value. |
| 39 | inherit It It inherits cursor property from its parent element. |
The following is an example to implement CSS cursor property
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 5px;
float: left;
}
#one {
background-color: beige;
}
#two {
background-color: lavender;
}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nw-resize {cursor: nw-resize;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
</style></head>
<body>
<div id="one">
<div class="nw-resize">left corner</div><div class="n-resize">up</div>
<div class="ne-resize">right corner</div>
</div>
<div id="two">
<div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div>
</div>
</body>
</html>Output
- Related Articles
- Changing the Mouse Cursor in Tkinter
- Changing the Position of List Markers using CSS
- Changing the Default Display Value using CSS
- Cursor property of CSS
- How to create Custom Cursor using CSS
- Example of CSS Cursor Property
- Hide the cursor on a webpage using CSS and JavaScript
- Changing Layouts Based on Screen Size using CSS
- Changing Column Width Based on Screen Size using CSS
- Values for the CSS cursor property
- Changing the Position of List Markers in CSS
- Specify the color of the cursor in elements with CSS
- How to set cursor style that indicates any direction scroll using CSS ?
- Design Smiley Face Eyes that follow Mouse Cursor using CSS and JS
- Changing the case of a string using JavaScript
Advertisements