CSS Disabled Cursor Not Allowed

In CSS, the cursor property allows you to control the appearance of the cursor when it hovers over an element. There are various cursor types available, such as a pointer, text, crosshair, etc. However, there is a specific cursor value called not-allowed that indicates that interacting with the element is not allowed or prohibited.

Syntax

You can set the cursor property to not-allowed using the following syntax:

selector {
  cursor: not-allowed;
}

The selector represents the element(s) to which you want to apply the not-allowed cursor style. It can be any valid CSS selector, such as a class, ID, or tag selector.

Behaviour

When the not-allowed cursor style is applied to an element, it usually changes the cursor to a circle with a diagonal line, indicating that interaction with the element is disabled or not permitted. This cursor style is commonly used for disabled buttons, links, or form fields.

Example

Consider the following example where we disable interaction with a button using the not-allowed cursor style:

<button class="disabled-button">Click Me</button>

.disabled-button {
  cursor: not-allowed;
}

In this example, when you hover over the button, the cursor will change to the not-allowed style, indicating that clicking the button is disabled.

Notes

• The not-allowed cursor style may not be supported in some older browsers or custom cursor styles may override it. It's a good practice to provide alternative feedback when interaction is disabled, such as changing the appearance of the element, showing a tooltip, or displaying a custom message.

Conclusion

The cursor: not-allowed; CSS property can be used to indicate that interaction with an element is disabled. It changes the cursor to a style that conveys the message of not being allowed to interact with the element. Remember to provide alternative feedback in case the not-allowed cursor style is not supported or overridden.