Changing cursor: pointer to custom cursor in CSS

Question

I have a really big project where I need to change all the cursor: pointer to a custom pointer

Here's how the normal pointer looks:

One way to do it is to create a class like the following in CSS and apply it to every element in html where the custom pointer is supposed to appear:

.custom-pointer {
    cursor: url("../img/custom-pointer-cursor.png"), auto;
}

The problem though is that that pointer is supposed to appear in a 100+ places in the project and I was wondering if there is a way to just override cursor: pointer with my custom pointer with only a couple of lines of code in css.

I have looked on the web but have not found anything similar to what I want to do.

What about using tag selectors?? like "button, input[type='submit']" — Pons Purushothaman
– Pons Purushothaman, Commented Aug 13, 2019 at 11:10
Any halfway decent IDE should have functionality to do a search & replace over all project files … so replacing cursor: pointer with cursor: url(…), auto; should not be that big of a deal to begin with. (And if the use of white space isn’t that consistent across the project, a regular expression search should be able to handle that as well.) — misorude
– misorude, Commented Aug 13, 2019 at 11:16

Amarjit Singh · Accepted Answer · 2019-08-13 11:14:16Z

3

Basically we use pointer on anchors and buttons, if there is something else where you need custom cursor, I think you can use following code:

a,button{
 cursor: url("../img/custom-pointer-cursor.png"), auto;
}

answered Aug 13, 2019 at 11:14

Amarjit Singh

1,1928 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing cursor: pointer to custom cursor in CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related