CSS cursor prohibition
CSS cursor disabled
In web development, we often use CSS to set the mouse pointer style to improve user experience. However, sometimes we need to prevent users from changing the cursor’s style. This is achieved using cursor: none; . This article details how to prevent the cursor from changing in CSS.
1. Disabling the Cursor with cursor: none;
By setting the cursor: none; style, you can prevent the cursor from displaying on a specific element. Here’s a simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Disabling the Mouse Pointer</title>
<style>
.no-cursor {
cursor: none;
}
</style>
</head>
<body>
<div class="no-cursor">This is an element that disables the mouse pointer</div>
</body>
</html>
Output:
In the example above, when the mouse moves over the div element with the class name no-cursor, the mouse pointer will not be displayed.
2. Dynamically Control the Mouse Pointer Using JavaScript
In addition to setting cursor: none; in CSS, we can also use JavaScript to dynamically control the display of the mouse pointer. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Mouse Pointer Control Example</title>
<style>
.no-cursor {
cursor: none;
}
</style>
<script>
document.addEventListener('mousemove', function(e) {
if (e.target.classList.contains('no-cursor')) {
document.body.style.cursor = 'none';
} else {
document.body.style.cursor = 'auto';
}
});
</script>
</head>
<body>
<div class="no-cursor">This is an element that disables the cursor.</div>
</body>
</html>
Output:
In the example above, when the mouse moves over an element with the class name no-cursor, the cursor will not be displayed; otherwise, the cursor will be displayed with the default style.
3. Disable mouse events using pointer-events: none;
In addition to disabling the display of the mouse pointer, we can also use pointer-events: style to disable mouse events. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Disable Mouse Events Example</title>
<style>
.no-events {
pointer-events: none;
}
</style>
</head>
<body>
<button class="no-events">Disable Click Button</button>
</body>
</html>
Output:
In the above example, when the mouse clicks the button with the class name no-events, the button will not trigger a click event.
4. Using user-select: none; to Disable Text Selection
Sometimes we want to prevent users from selecting text on the page. We can use the user-select: none; style to achieve this. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Disabling Text Selection</title>
<style>
.no-select {
user-select: none;
}
</style>
</head>
<body>
<p class="no-select">This is a paragraph that disallows text selection</p>
</body>
</html>
Output:
In the above example, if a user attempts to select text within a paragraph with the class name no-select, the text will not be selected.
5. Prevent Element Resizing with resize: none;
Sometimes we want to prevent users from resizing elements on a page. We can use the resize: none; style to achieve this. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Disable Resizing Example</title>
<style>
.no-resize {
resize: none;
}
</style>
</head>
<body>
<textarea class="no-resize">This is a non-resizeable text box</textarea>
</body>
</html>
Output:
In the example above, when the user attempts to resize a text box with the class name no-resize, the text box will not resize.
6. Disable Touch Events with touch-action: none;
In mobile development, sometimes we want to disable touch events. We can use the touch-action: none; style to achieve this. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Touch event disabled example</title>
<style>
.no-touch {
touch-action: none;
}
</style>
</head>
<body>
<div class="no-touch">This is an element that disables touch events</div>
</body>
</html>
Output:
In the above example, when a user touches an element with the class name no-touch, no touch events are triggered.
7. Disable scrollbars using overflow: hidden;
Sometimes we want to disable scrollbars on a page. We can use the overflow: hidden; style to achieve this. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Disable Scrollbar Example</title>
<style>
body {
overflow: hidden;
}
</style>
</head>
<body>
<p>This is a page with disabled scrollbars</p>
</body>
</html>
Output:
In the above example, no scrollbar will appear on the page, and users will not be able to scroll the page content.
8. Use touch-action: pan-y; to disable vertical scrolling
In mobile development, sometimes we want to disable vertical scrolling of the page. We can use the touch-action: pan-y; style to achieve this. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Disable Vertical Scrolling Example</title>
<style>
body {
touch-action: pan-y;
}
</style>
</head>
<body>
<p>This is a page that disables vertical scrolling</p>
</body>
</html>
Output:
In the above example, users cannot scroll the page content using the vertical scroll gesture.
9. Use touch-action: pan-x; to disable horizontal scrolling
In mobile development, sometimes we want to disable horizontal scrolling of the page. We can use the touch-action: pan-x; style to achieve this. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of disabling horizontal scrolling</title>
<style>
body {
touch-action: pan-x;
}
</style>
</head>
<body>
<p>This is a page that disables horizontal scrolling</p>
</body>
</html>
Output:
In the above example, users cannot scroll the page content using the horizontal scroll gesture.
10. Disable Mouse Events with pointer-events: none;
In addition to using pointer-events: none; to disable mouse events on specific elements, we can also use this style to disable all mouse events on the entire page. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of disabling all mouse events</title>
<style>
body {
pointer-events: none;
}
</style>
</head>
<body>
<p>This is a page that disables all mouse events</p>
</body>
</html>
Output:
In the above example, users cannot trigger any mouse events on the page.
Through this article, we learned how to use CSS and JavaScript to disable the mouse pointer, mouse events, text selection, element resizing, touch events, and scrollbar operations in web development. These techniques can help us better control user interaction with the page and improve the user experience.