Menu
I'm trying to use custom png cursor using data uri but the cursor doesn't change. I've tested on FF 17 which support png as custom cursor. The same data uri work as a background image.
Am I using wrong syntax or maybe data-uri can't be used as a cursor image?
example: http://jsfiddle.net/u8t3j/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>cursor test</title>
<style>
#cursor {
width: 300px;
height: 300px;
border: 1px solid black;
cursor: url(data:image/png;base64,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);
}
#background {
width: 300px;
height: 300px;
border: 1px solid black;
margin-top: 10px;
background-image: url(data:image/png;base64,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);
}
</style>
</head>
<body>
<div id="cursor"></div>
<div id="background"></div>
</body>
</html>
The answer works for png in FF and Chrome so I'm adding an example for .cur image that doesn't work in IE
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>cursor test</title>
<style>
#cursor {
width: 300px;
height: 300px;
border: 1px solid black;
cursor: url(data:application/cur;base64,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wP////3//v7+//38+//+/fz//////4aGhvwQEBB5AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOgAcCTsBGyM8ABsiMQAWGx8RGJM4Ojn/zce4//Lq2P/r49L/6+PS/+vj0v/r49L/6uPR/+rj0f/q49L/6+HK/9/TtP+PiXv/dXNy/9XU1f/////////+///////R0dH/Ly8vyBEREQ4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8ABgJOwEbIzsAGyAxABUfGxAWoERHQ//b1MT/8enX/+vj0v/r49L/6+PS/+rj0f/r49H/6uPS/+rj0f/e1Lf/5tvA//j39P/IyMr/dHRz/5KSkf/t7ez/7Ovr/1pZWeAODQ01AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwAFwo7AR0jPAAbIC8AFSEZDhSqU1RQ/+Layv/w6Nf/6uPR/+vj0f/q49H/6+PR/+rj0v/r5NX/5NzE/+DUuP/28uv////////////v7+//mJeX/1pZWv87Ozv/HhwdvAkHCA8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOQIgCzwBGiM8ABwfLgAVJRcOE7RiYlz/5+HP//Do1v/q49H/6uPR/+vj0v/q49H/6+TT/+nhz//h1rz/9O/l///////9/Pv//fz7///+/f//////19fW/21sbf8uLi7/GxsbuQoKCicAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4Ax8LPAEaIzsAGx4uAhUoFg4TumtsZf/r5NP/7+fW/+rj0f/q49H/6uPR/+rj0v/q49H/5NnA//Hr4P///////fz7//38+//9/Pv//fz7//79+////////////7Gxsf9PT0//HB0czwwNDDAAAAAAAAAAAAAAAAAAAAAAAAAAADYBHQw9ARsjOwAbHi4DFSoVDxS9dXNs/+7m1f/v59b/6+PS/+vj0v/r5NP/6uTS/+bcxv/v59j///7///79/f/9/Pv//fz7//38+//9/Pv//fz7//38+////////////+Hh4f99fn3/JSYlwwoKChoAAAAAAAAAAAAAAAAAAAAAOwEeDDsBGyM7ABodLQQWLBUQFcB9fHP/8ejW/+/m1P/q49H/6uPR/+vk0//o38r/7OXU//38+//+/v7//fz7//38+//9/Pv//fz7//38+//9/Pv//fz7//37+v/9/Pv//////+zr6v85ODj5EhITVQAAAAAAAAAAAAAAAAAAAAA+Ah0MPAAbIzsAGR0sBBUuFxIXw4KBeP/x6df/7eXU/+rj0f/q49L/6ODN/+riz//7+fb///////38+//9/Pv//fz7//38+//9/Pv//fz7//38+//9/Pv////+///////y8vL/gYCA/x8fH7kUFBMcAAAAAAAAAAAAAAAAAAAAADwBHA08ARskOwAaHCwEFjAYFBjFiId9//Hp2P/t5tT/6+PS/+ni0P/n4Mv/9/Ts///////9/Pz//fz7//38+//9/Pv//fz7//38+//9/Pv//v79//////////7/v76+/15eXv4ZGRmWDg4OGQAAAAAAAAAAAAAAAAAAAAAAAAAAOgIbDTwBGyQ7ABocLAMVMRkVGcaOjYP/8urZ/+3m1P/q49L/597J//Lu4v///////fz8//38+//9/Pv//fz7//38+//+/fz////+///////+/f3/x8fH/2lpaf4rKyu+ERERTRUVFQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7ARsNPAEbJDsAGhwrAxUxGhcax5STif/z69r/7ebV/+XdyP/t5tb///7+//39/P/9/Pv//fz7//38+////v3////////////19fX/xsbG/2lpafUlJSXHDg4OXBoaGggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADoBHA08ARslOwAaHSwDFTQcFxvInZuQ//Tt2v/n3sb/5t7J//z7+f///f3//fz7//79/P////////////7+/f/m5+b/rq6t/11cXOoiIiK0DxAPUwwLDAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOgEcDjsBHCQ5ABoXJAMSLBwaHMeinpD/7ODH/+LXvf/59fD//////////v////////////T09P/R0dD/kpKR/0hISNoWFhefDQ0PQwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8AR0IPgEdDzkAGQMWAgoZGB0dwaObhv/m2Lf/9fHo/////////////////9/f3/+urq7/bGxr+zAwMMMPDw97ERESLwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoIChcaHB3BrqWO///87f//////6+vr/7u8vP+Dg4T/SEhI7hwcHKkMDAxZDg4OGgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABwoKGiEgH8OxrJ7/zs/O/42MjP9TU1P+LCssxhISEn0LCws7ExMTDQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEBAaJiYmyEhJSfoxMTG7FxcXfA8PD0AUFRUZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEREQwaGhpCHBwdLRMTEw4UFBQDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//gP/+DwB//AYAP/wAAD/4AAAf+AAAB/gAAAPwAAAD8AAAAfAAAAHwAAAB8AAAAfAAAAHwAAAD8AAAA/AAAAfwAAAH8AAAA/AAAAHwAAAA8AAAAPAAAADwAAAB8AAAA/AAAA/wAAA/8AAB//AAB//+AB///gB///4D///+D///8=), pointer;
}
#background {
width: 300px;
height: 300px;
border: 1px solid black;
margin-top: 10px;
background-image: url(data:image/png;base64,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);
}
</style>
</head>
<body>
<div id="cursor"></div>
<div id="background"></div>
</body>
</html>
Thanks
366
Add , auto after your data url like such:
cursor: url(data:image/png;base64,...), auto;
Not sure why this fixes the problem.
146
Cursor data-uri's are not supported in IE. IE also doesn't support PNGs as cursors. So the best fallback I could get for this case was the following: (tested on IE, Edge, Chrome, FF, Safari
style.cssText += ";cursor:url('cursors/" + file + ".cur'), auto;"; // For IE
style.cssText += ";cursor:url('cursors/" + file + ".cur') 16 16, auto;"; // For other browsers - this will do nothing in IE
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
