Adding cursors to stuff for better UX

One of the weird quirks of the default web experience is that not every interactive elements get a cursor (the little hand icon thing) by default.

Links do, but button and summary elements as well as radio and checkbox elements do not.

For years, there’s been a debate among developers about whether or not they should, but a lot UX professionals agree that the general expectation of users is that interactive things show the hand cursor.

The good news is that you can easily add that behavior yourself using a few lines of CSS.

button,
[type="button"],
[type="reset"],
[type="submit"],
[type="image"],
[type="checkbox"],
[type="radio"],
summary {
	cursor: pointer;
}

I drop that into all of my projects.