How to set cursor style that indicates any direction scroll using CSS ?
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
Last Updated :
22 Apr, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...