Menu
How can I specify a custom mouse cursor using a JSX inline style?
This works fine:
<Component
style={{ cursor: 'crosshair' }}
/>
but I cannot seem to get anything along the lines of
<Component
style={{ cursor: 'url(images/special.cur)' }}
/>
to work. Elsewhere I am successfully getting static images from the same location
<img
src="images/example.png"
/>
so I believe the server is set up properly.
I've tried Chrome, Firefox, and IE 11.
I know must be doing something fundamentally wrong. How do I do this?
Thanks very much!
EDIT
(StackOverflow seems not to approve of the continued comment thread so let me address Josh's latest point as an edit instead.)
Yes, a plain HTML element gets the custom cursor. I agree it must be a syntax problem, but what is the correct syntax for cursor: url(file) in JSX? That is what I'm trying to figure out. Thanks again!
<body>
<input style="cursor: url(images/special.cur),auto;" type="img" src="images/example.png" />
<div id="container"></div>
...
</body>
where the <input> gets my special cursor and the "container" <div> is where my React components are rendered.
I also realize that I hadn't mentioned before that I am using React-Bootstrap components for my interface. I know that Bootstrap adds lots of styles but I wouldn't think they would "win" in this case, would they?
266
I believe I figured this out. There were two things wrong, and Josh pointed one of them out. Sorry if anyone wasted much time on this, but for the record:
The basic problem is that I used an online image converter to convert an image to .cur format and I now believe it returns corrupt or at least inadequate .cur files.
When I tried .png format instead with a fallback value as Josh suggested, I can make custom cursors work on Chrome and Firefox. I will have to find some better tool to make a proper .cur file for IE still as it only supports the .cur (and .ani) formats. I was able to use another .cur file I found online somewhere which does work with IE as documented.
[I know that I said I was able to use my "inadequate" .cur file with plain HTML outside of React; I must have been trying too many things at once. Today I can't make that work either. Sorry for the misleading reply.]
So JSX doesn't require anything special other than a valid cursor image file and a fallback built-in cursor.
<Component
style={{ cursor: 'url(images/special.png),auto' }}
/>
Thanks.
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With