CSS (Cascading Style Sheets) is a powerful tool for designing the visual appearance of your website, including cursor styling. The cursor is an important aspect of web design. It helps provide visual feedback to users and enables them to interact effectively.
What is a cursor?
The cursor is a position indicator that indicates the user's current location on the screen. It is also known as the "caret". It plays an important role in user interface design. In CSS, we can set the cursor as needed to provide visual feedback to the user indicating what actions can be performed at a specific location.
grammar
css selector {
courser : courser type;
}
Now we will explore the different types of cursors that can be set using CSS
Default cursor
In web design, the default cursor is the most common cursor type, used when no other cursor is specified. It looks like an arrow pointer on the screen, indicating that the user can click on the element.
Example 1
Here is an example of setting the default cursor.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
a {
cursor: default;
}
</style>
</head>
<body>
<h2 id="This-is-an-example-of-default-cursor">This is an example of default cursor</h2>
<a href="https://www.tutorialspoint.com/index.htm" class="my-link">Click Here</a>
</body>
</html>
PointerCursor
The pointer cursor is represented by a hand pointing to the link. When a user hovers over a link, it indicates that the element is clickable. We can use the following code to set the pointer cursor −
css-elector {
cursor: pointer;
}
Text cursor
The text cursor is a flashing horizontal or vertical line that appears as an I-shaped cursor pointer. When a user hovers over text or a text input field, it indicates that they have edited or selected text. We can use the following code to set the text cursor -
css-elector {
cursor: text;
}
Crosshair cursor
The crosshair cursor simply appears as horizontal and vertical lines for the crosshair pointer. The crosshair cursor is used to select a specific area on the screen, such as in image editing tools. We can set the crosshair cursor using the following code -
css-elector {
cursor: crosshair;
}
Move cursor
The mobile cursor appears on the screen in the form of four arrow pointers. It is typically used for dragging and dropping an element to indicate that it can be moved. We can use the following code to set the moving cursor -
css-elector {
cursor: move;
}
Cursor not allowed
A cursor not allowed indicates that the requested operation will not be performed. It appears in the form of a circle with diagonal lines. We can use the following code to set the cursor which is not allowed -
css-elector {
cursor: not-allowed;
}
Progress Cursor
The progress cursor is displayed in the form of a rotating circle. It indicates that the program is busy in the background, but the user can still interact with the interface. We can use the following code to set the progress cursor -
css-elector {
cursor: progress;
}
Wait for cursor
Wait for the cursor to appear as a rotating windmill. It indicates that the program is busy and unable to interact with the user interface. We can use the following code to set the wait cursor -
css-elector {
cursor: wait;
}
Help Cursor
The help cursor is displayed as a question mark pointer. Used when the user needs help, such as when clicking a help icon or button. We can set the help cursor using the following code -
css-elector {
cursor: help;
}
Example 2
Here is an example of how to set the different types of cursors using CSS.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color: lightgreen;
}
div{
margin: 3px;
padding: 5px;
}
</style>
</head>
<body>
<h2 id="Setting-the-different-types-of-cursors-using-CSS">Setting the different types of cursors using CSS</h2>
<h3 id="Move-the-mouse-over-the-words-to-see-the-cursor-change">Move the mouse over the words to see the cursor change:</h3>
<div style="cursor:default">Default</div>
<div style="cursor:text">Text</div>
<div style="cursor:pointer">Pointer</div>
<div style="cursor:crosshair">Crosshair</div>
<div style="cursor:move">Move</div>
<div style="cursor:not-allowed">not-allowed</div>
<div style="cursor:progress">Progressd</div>
<div style="cursor:wait">wait</div>
<div style="cursor:help">help</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:w-resize">w-resize</div>
</body>
</html>
Use CSS to customize the cursor
In addition to the standard cursors provided by CSS, we can also use custom cursors. By using custom cursors, we can add a unique touch to our website.
Example 3
The following is an example of using CSS to create a custom cursor.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
.my-cursor {
width: 200px;
margin: auto;
background-color: lightblue;
cursor: url(https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto;
}
</style>
</head>
<body>
<h2 id="Custom-Cursors-with-CSS">Custom Cursors with CSS</h2>
<div class="my-cursor">
<h3 id="Move-the-mouse-over-to-see-the-cursor-change">Move the mouse over to see the cursor change</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text </p>
</div>
</body>
</html>
In the above example, we have created a div element with a class of my-cursor. We then set the cursor property to URL ( https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto. This means that the browser uses the cursor_120340.png file as a custom cursor and falls back to the default cursor if the file is not found or fails to load.
in conclusion
Here, we discussed the different types of CSS cursors. It is a powerful tool for web designers to customize cursor styles and provide visual feedback for user interactions. By using the above code, we can set different types of cursors in CSS.
The above is the detailed content of How to set different types of cursors using CSS?. For more information, please follow other related articles on the PHP Chinese website!
Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AMYes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur
Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AMWhat does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.
CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AMCSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For
@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo
CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PMCSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust
Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AMUsing scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.
Revisiting Image MapsMay 07, 2025 am 09:40 AMLet’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.
State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AMThe State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Atom editor mac version download
The most popular open source editor
SublimeText3 Linux new version
SublimeText3 Linux latest version
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
SublimeText3 English version
Recommended: Win version, supports code prompts!
