Lesson 21: Cursors and Pointers

On devices that aren’t touchscreens, the cursor is a key way for your users to know what they are interacting with. You can also give useful hints about how to use an element. You can hint at how a move with a trackpad or mouse will affect your site.

Cursors#

Browsers handle some common cursor cases for you.

If you are reading this on a device with a cursor, explore the page. You may not have noticed how cursors change before, but look at the hints they give. When your pointer goes over text, the cursor changes to a selection I-beam. That shape suggests you can select the text. When you hover over a link, the cursor changes to a hand pointing with the index finger. That shape suggests you can take an action. Everywhere else has a default cursor, which is often an arrow.

As you build more interactive sites, you will want to change the cursor so users can understand the interactions more easily.

Browsers support a range of keywords for the cursor property. These keywords give hints for dragging, resizing, selection, and more.

If none of the supported cursors show what an element does, you can also use an SVG or PNG image as a cursor.

Carets#

An insertion caret shows your position in editable text. This is different from your cursor, since it doesn’t follow your mouse. You can change its color with caret-color.

Responding to a user’s pointer inputs#

Users with a mouse or trackpad can point at a more exact spot on the screen than users with a touchscreen. If you design only for the precision of a mouse, some users may struggle. This includes users with touchscreens or with fine motor control issues, who may not be able to interact with your page the way they need to.

Common problems include buttons that are too small or interactive elements that sit too close to each other. These make it hard for users to interact with the right element.

Making sure your buttons and other targets are large enough is an important step toward an accessible site. You can also change your styles based on how precise the user’s input device is. You do this with the pointer and any-pointer media queries.

The pointer media feature refers to the user’s main input device. The any-pointer feature refers to all of their input devices. You can match devices like a mouse with fine and devices like a touchscreen with coarse. The none value means the user has no input device with a pointer.

Pointer and touch events#

Disabling specific touchscreen gestures#

When you use a touchscreen, the browser handles some common gestures. For example, touching the screen with two fingers and spreading them apart usually zooms in on the site. You don’t have to build those behaviors yourself. But in some cases you may want to turn them off or override them.

To opt out of the browser handling some actions, list the actions you do want the element to handle. The pan-x and pan-y values turn on single-finger panning gestures. You can turn these on along with pinch-zoom, which turns on multi-finger zooming and panning.

The manipulation keyword is the same as pan-x pan-y pinch-zoom. It leaves out other touch behaviors that need several touches in a short time, like double tap to zoom.

After you turn off the browser handling for an action by leaving it out of touch-action, you can set up pointer events for that action.

[!NOTE] Be careful when you disable touch actions that you don’t cause accessibility problems. For example, removing the ability for a user to zoom in on the whole page may make your design more stable. But it may also make it harder for people with visual impairments to read the content.

Disabling all events and actions#

In some cases, you may want to say that an element is not interactive. By setting pointer-events: none on a button, for example, you won’t be able to click it. You won’t even be able to trigger a hover state.

Adapted from Learn CSS © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).