Cursor Properties

In CSS, the cursor property allows us to specify the type of cursor that should be displayed when hovering over an element.

This property is useful for providing visual feedback to users, indicating the interactivity or action associated with an element.

Default (auto):

The browser sets the cursor to its default cursor, typically an arrow.

Example:

button {
    cursor: auto;
}

Pointer (pointer):

Example:

a {
    cursor: pointer;
}

Indicates a link or clickable element.

Example:

input[type="text"] {
    cursor: text;
}

Text (text):

Example:

.selection-area {
    cursor: crosshair;
}

Indicates text that can be selected or edited.

Example:

.draggable {
    cursor: move;
}

Crosshair (crosshair):

Example:

.resizable-column {
    cursor: col-resize;
}

Displays a crosshair, often used for precise selection.

Example:

.help-icon {
    cursor: help;
}

Move (move):

Example:

.disabled {
    cursor: not-allowed;
}

Indicates that the element can be moved.

Resize ("col-resize", "row-resize", "nw-resize", "ne-resize", "sw-resize", "se-resize", "ew-resize", "ns-resize"):

Indicates that the element can be resized in the specified direction ("column", "row", "northwest", "northeast", "southwest", "southeast", "horizontally", "vertically").

Help (help):

Indicates that help information is available.

Not Allowed (not-allowed):

Indicates that the requested action is not allowed or unavailable.

<-- Font Size and Font Family

CSS Position Properties -->