CSS mouse turns into a prohibition symbol
CSS Mouse Cursor Becomes a Prohibited Symbol
In web design and development, we often need to change the style of the mouse cursor to enhance the user experience or provide more interactive prompts. CSS provides a simple and powerful way to change the mouse cursor’s style, one of which is to change it to a “no sign” symbol. This article details how to use CSS to change the mouse cursor to a “no sign” symbol and provides some practical code examples.
What is a “no sign” symbol?
The “no sign” symbol is a special mouse cursor style used to indicate that the current action is prohibited or unavailable. It typically appears as a circle with a slash through it, or sometimes as a red circle. When the user hovers the mouse pointer over a prohibited element, the cursor changes to a “no sign” symbol to remind the user that the action is unavailable.
Use CSS to Change the Cursor to a Prohibited Symbol
In CSS, we can change the style of the mouse cursor using the cursor property. To change the cursor to a prohibited symbol, we can use cursor: not-allowed;. Here’s a simple example:
.not-allowed-cursor {
cursor: not-allowed;
}
In the example above, we create a CSS class called .not-allowed-cursor and set its cursor property to not-allowed. Next, we can apply this class to any element we want to display a forbidden sign cursor, as shown below:
<div class="not-allowed-cursor">
This is an example of a forbidden sign cursor.
</div>
By applying the .not-allowed-cursor class to a <div> element, we make it display a forbidden sign cursor when the mouse hovers over it.
Sample Code and Results
To better understand how to use CSS to change the mouse cursor to a forbidden sign, let’s look at a more complete example code. The following example, along with HTML and CSS code, shows how to create a button with a prohibitory sign cursor:
<!DOCTYPE html>
html>
<head>
<style>
.not-allowed-cursor {
cursor: not-allowed;
padding: 10px;
background-color: red;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<button class="not-allowed-cursor">Not Allowed</button>
</body>
</html>
In the example code above, we create a button element with the .not-allowed-cursor class and set styles such as background color, padding, text color, and bold font. After applying this class to the button element, the cursor changes to a prohibited symbol when the mouse pointer hovers over the button.
Actually running the above code, we can get a button with a prohibition sign cursor.
In the run results, when the mouse pointer hovers over the button, the cursor changes to a prohibition symbol to indicate that the action is prohibited or unavailable.
Compatibility Considerations
It’s important to note that while most modern browsers support the cursor: not-allowed; property, for better compatibility, we should provide a fallback for the no-allowed cursor.
On browsers that don’t support the cursor: not-allowed; property, we can use cursor: pointer; as a fallback cursor style. This way, even on browsers that don’t support the no-allowed cursor, the mouse pointer will display as a hand (pointer) cursor, indicating that the button is an active link or clickable element.
To implement this fallback, we can use multiple CSS properties. Below is an example code using the multiple properties of cursor: not-allowed; and cursor: pointer;:
.not-allowed-cursor {
cursor: not-allowed;
cursor: pointer;
}
In the above example, if the browser supports the prohibitory cursor, it will use the cursor: not-allowed; property; otherwise, it will use the cursor: pointer; property to display a hand cursor.
Conclusion
By using the CSS cursor property, we can easily change the mouse cursor to a prohibitory cursor. This style of cursor is often used to indicate prohibited operations or unavailable elements, enhancing the user experience and providing more interactive cues.
This article details how to use the cursor: not-allowed; attribute to change the cursor to a not-allowed cursor. It also provides an example with complete code and results. Additionally, we discuss compatibility considerations and provide a workaround to ensure a good user experience on browsers that don’t support the not-allowed cursor.