Skip to main content
X

Explore your training options in 10 minutes

CSS Tutorials

A Guide to the CSS Cursor Property

Christina Kopecky - December 29, 2020


Cursors have been around since “ The Mother of All Demos ” where Douglas Englebart introduced to the world the mouse and the graphical user interface in the late sixties. The mouse cursor allows us to see where we are in space on our computer screen. As a user experience tool, it’s really great at being able to show us what we can do at any point on the screen or what the computer is doing. This article will tell you about some of the ways we can use the mouse cursor on our webpage to improve the user experience of your website.

Syntax

In our CSS selector, we use the following syntax to change the cursor to something other than the default arrow.

cursor: [ url(1.png), url(2.png) ], etc.,
        <mandatory keyword value>

In between the first set of square brackets, we have a list of urls, separated by commas. This is an optional value. It allows for custom cursors to be used – there are any number of custom cursor creators on the internet to help you create something that’s uniquely yours.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

The comma separated list indicates that the browser will try to load the first one. If it can’t find the first one or the url is not correct, it’ll go on down the list until it finds one that works or it’ll be set to the mandatory keyword at the end.

The first parameter – with the urls is optional. The second is not. You must include a keyword that gives a set of instructions to tell which cursor type you would like to see there. Here are some of the available values:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS custom cursor</title>
<style>      
    table {
     width:100%;
     text-align: center;
     border-collapse: collapse;
     font-family: 'Roboto', sans-serif;
   }
   thead {
     width: 100%;
     background: lightblue;
   }
 
   tr:nth-child(even) {
     background-color: lightgrey;
   }
 
   td {
     width: 32%;
     height: 50px;
     padding: 10px;
   }
 
   td.test {
     color: red;
     font-weight: bold;
   }
 
   td#auto {
     cursor: auto;
   }
 
   td#cell {
     cursor: cell;
   }
 
   td#crosshair {
     cursor: crosshair;
   }
 
   td#default {
     cursor: default;
   }
 
   td#none {
     cursor: none;
   }
 
   td#pointer {
     cursor: pointer;
   }
 
   td#help {
     cursor: help;
   }
 
   td#progress {
     cursor: progress;
   }
 
   td#wait {
     cursor: wait;
   }
 
   td#text {
     cursor: text;
   }
 
   td#vertical-text {
     cursor: vertical-text;
   }
 
   td#zoom-in {
     cursor: zoom-in;
   }
   td#zoom-out {
     cursor: zoom-out;
   }
</style>
</head>
<body>
  <table>
   <thead>
     <td>Cursor Type:</td>
     <td>Description:</td>
     <td>Test it Out: </td>
   </thead>
   <tr>
     <td>auto</td>
     <td>Automatically figures out which cursor to use based on context.</td>
     <td class="test" id="auto"> TEST </td>
   </tr>
   <tr>
     <td>default</td>
     <td>Typically an arrow, but depends on platform being used.</td>
     <td class="test" id="default"> TEST </td>
   </tr>
   <tr>
     <td>help</td>
     <td>Used to indicate help is available</td>
     <td class="test" id="help"> TEST </td>
   </tr>
   <tr>
     <td>none</td>
     <td>No cursor present</td>
     <td class="test" id="none"> TEST </td>
   </tr>
   <tr>
     <td>pointer</td>
     <td>Most often used when hovering over link or button to indicate it can be clicked.</td>
     <td class="test" id="pointer"> TEST </td>
   </tr>
   
    <tr>
     <td>progress</td>
     <td>A mashup of pointer and wait - indicates that the UI can still be interacted with while something else is happening...</td>
     <td class="test" id="progress"> TEST </td>
   </tr>
    <tr>
     <td>text</td>
     <td>Tells the user text can be highlighted.</td>
     <td class="test" id="text"> TEST </td>
   </tr>
    <tr>
   <tr>
     <td>wait</td>
     <td>Indicates that the computer is thinking and user CANNOT interact with UI...</td>
     <td class="test" id="wait"> TEST </td>
   </tr>
    <tr>
     <td>zoom-in</td>
     <td>Indicates to user that we can zoom in on something. </td>
     <td class="test" id="zoom-in"> TEST </td>
   </tr>
   <tr>
     <td>zoom-out</td>
     <td>Indicates to user that we can zoom out on something. </td>
     <td class="test" id="zoom-out"> TEST </td>
   </tr>
 </table>
</body>
</html>

The code above only shares some of the available cursors that we can use on our site. Check out the MDN for others.

Conclusion

Today we have gone over some of the different ways to add cursors to your website to assist in improving the user experience. By using the cursor to indicate what can be done on any given point on the page, users know what to expect when they navigate your site. There are many more than the ones mentioned here.

I recommend checking out the different ways you can customize your cursor to fit your needs. And remember: the cursor is just one half of the UX. The other half is actually implementing what the user expects the cursor to do. We’ll get into that another time. Happy hacking!

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.

Skip to main content