In this article, we will see how to set the cursor style for any direction using CSS. This style can be created by using all-scroll cursor property. This property sets the cursor that it indicates any direction scroll using CSS. The all-scroll property value indicates that something can be scrolled in any direction.
Syntax:
cursor: all-scroll;
Example 1:
HTML
<!DOCTYPE html> <html>
<head>
<style>
#all-scroll {
cursor: all-scroll;
}
</style>
</head>
<body>
<h1 style="color: green">
Welcome to GeeksforGeeks
</h1>
<h2 style="font-family: Impact" id="all-scroll">
Mouse over here to change the
mouse cursor.
</h2>
</body>
</html>
|
Output:
Example 2: We can use move property value to set the cursor style.
HTML
<!DOCTYPE html> <html>
<head>
<style>
.gfg {
color: green;
font-size: 50px;
}
#all-scroll {
cursor: all-scroll;
}
#move {
cursor: move;
}
</style>
</head>
<body>
<h1 style="color: green">
Welcome to GeeksforGeeks
</h1>
<h2 id="all-scroll">
Mouse over here to change the
mouse cursor using <small class="gfg">
all-scroll</small> property.
</h2>
<h2 id="move">
Mouse over here to change the mouse
cursor using <small class="gfg">move
</small> cursor property.
</h2>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome
- Edge
- Mozilla Firefox
- Opera
- Safari