Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the cursor style on browser using CSS?
Generally, the cursor on any browser window is of arrow type by default. But you can change the cursor style or type to any style of your choice for any kind of text. There are many cursor style options that are available in CSS that you can choose to style your cursor like pointer, zoom-in, zoom-out etc. You can also use any image or icon as a cursor style value to change the cursor style to an image. There is a cursor property provided by the CSS that we can use to style our cursor on browser using CSS.
Let us now understand the use of the cursor property in details a practically implement it to change the cursor style on browser.
Syntax
The below syntax will show you how you can change the cursor style using the cursor property in CSS −
cursor: value;
Let us now implement it practically and understand it in details with the help of code examples.
Steps
Step 1 − In the first step, we will define a parent container in the HTML document that will contain all the other elements inside it.
Step 2 − In the next step, we will define different div elements inside the element defined in previous step with classes associated with them.
Step 3 − In the final step, we will grab the elements with their classes and define the different cursor styles on each one of them using the cursor property of CSS.
Example
The below example will explain the use of the cursor property of CSS to change the cursor style on browser −
<!DOCTYPE html>
<html>
<head>
<style>
.outer-div {
display: flex;
border: 2px solid red;
}
.inner-div {
border: 1px solid green;
margin: 5px;
padding: 5px;
}
.inner-div1 {
cursor: pointer;
}
.inner-div2 {
cursor: zoom-in;
}
.inner-div3 {
cursor: zoom-out;
}
.inner-div4 {
cursor: grab;
}
.inner-div5 {
cursor: progress;
}
</style>
</head>
<body>
<center>
<h2>Set the cursor style on browser using CSS</h2>
<p>The below div containers contains the cursor property with different type of styles.</p>
<div class = "outer-div">
<div class = "inner-div inner-div1"> This container contains the cursor style of type pointer. </div>
<div class = "inner-div inner-div2"> This container contains the cursor style of type zoom-in. </div>
<div class = "inner-div inner-div3"> This container contains the cursor style of type zoom-out. </div>
<div class = "inner-div inner-div4"> This container contains the cursor style of type grab. </div>
<div class = "inner-div inner-div5"> This container contains the cursor style of type progress. </div>
</div>
</center>
</body>
</html>
In the above example, we have used the different number of div elements to shoe the different kind of cursor property styles. We have used the cursor property with different values for each one of inner-div elements to see the change in the cursor styles on the browser.
Let us see one more code example in which we will use an image as the value of the cursor property and change the style of the cursor to that image.
The algorithm of this example is almost similar to the previous example. You just need to change the cursor styles defined in the cursor property value with an image url using the url() method to assign it.
Example
The below example will illustrate how you can set an image as the cursor style using the url() methos in CSS and change the style of the cursor −
<!DOCTYPE html>
<html>
<head>
<style>
.outer-div {
display: flex;
border: 2px solid red;
}
.inner-div {
border: 1px solid green;
margin: 5px;
padding: 5px;
}
.inner-div1 {
cursor: url("http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif"), auto;
}
.inner-div2 {
cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg"), auto;
}
</style>
</head>
<body>
<center>
<h2>Setting the cursor style on browser using CSS</h2>
<p>The below div containers contains the cursor property with different type of styles.</p>
<div class = "outer-div">
<div class = "inner-div inner-div1">This container contains the cursor style as a image.</div>
<div class = "inner-div inner-div2">This container also contains the cursor style as a image.</div>
</div>
</center>
</body>
</html>
In this example, we have seen how we can change the cursor style to an image using the url() method to set a value. We have used the pointer cursor such that hand image as cursor property image value for the first div container. While, for the second div we used the heart image to set as an cursor style on browser using the same methos to set the value using the url() method.
Conclusion
In this article, we learned about how we can change the cursor style on browser. We have discussed it in details with the help of two different code examples. In the former one, we change the cursor style to simple types that are provided by the CSS like pointer, grab progress etc. while in the later one, we have used two different images to set as cursor style using the url() methos to set the value to the cursor property.
31 Views
