So most developers probably know that it’s possible to change the cursor for any HTML element by using CSS’s handy cursor property. But how do you easily make sure that all clickable elements have a cursor pointer without having to assign the pointer property to every single anchor tag and submit button? Luckily the developers over at CSS Tricks came up with an awesome snippet for us to use just for this situation.
The snippet below not only shows you how to select pretty much any standard clickable element that could be in your HTML, but it also allows for you to add a class (.pointer) to any HTML element that might not be included within the snippet. So if you’re using this code and you want to be able to add a pointer cursor to an element that isn’t included in the selectors list, just add the class .pointer to that element and you’ll be all set.
Here’s the CSS:
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer{cursor:pointer;}
You should find the snippet relatively straightforward. Any anchor tags, submit buttons, certain input types and labels, select elements, button elements, and any element that has the .pointer class added to it is going to have a cursor that’s a pointer when it’s hovered upon to indicate that it is indeed clickable.