There are some times where the default cursor behavior from the User Agent Stylesheet doesn’t cut it. Hover over the link and the cursor changes from the default black arrow to a hand with its index finger extended, otherwise known as a pointer. That’s a solid visual indicator that the hyperlinked text is clickable.īrowsers take it a bit further. Even if we do nothing else in our CSS, links will have color: blue and text-decoration: underline. Some cursor changes are built into the User Agent Stylesheet. In this post I’ll cover two ways I think controlling the cursor in CSS can improve user experience. Remember when we learned ::selection was a thing and every site started using it to personalize the background color of text selections? Customizing cursors is just as easy and adds that extra bit of understated flourish when used correctly. Still, it’s easy to overlook cursors and their impact on the user experience of our sites.

There are a ton of options available to us and we’ve covered them pretty thoroughly in the ol’ Almanac here on CSS-Tricks. CSS can control the appearance of a cursor.