Изначально, сделать кастомный курсор через CSS достаточно просто. Есть свойство cursor, которому, в качестве значения курсора, можно указать какое-нибудь из заранее определенных, или же url к файлу. Исторически сложилось, что абсолютно все браузеры понимают только формат .cur, а всякие .gif, .jpg, .png IE вплоть до версии 8 видеть не хотят. Но скормить .cur файл ещё полдела, оказывается возникает куча проблем ещё и после этого.

Первый подход к станку я делал месяц назад. Тогда я зашел на Я.Карты и начал постепенно копировать их код, постигая и дополняя его. Итак, я скачал два курсора с карт и обозвал их b-grab.cur и b-grab_state_grabbing.cur. Код простой:

.b-grab
{
    cursor:url(b-grab.cur) 16 16,move;
}

.b-grab_state_grabbing
{
    cursor:url(b-grab_state_grabbing.cur) 16 16,move;
}

Для Фаерфокса можно написать гораздо проще, т.к в нём этот курсор уже зашит:

.b-grab[class], x:-moz-any-link, x:default
{
    cursor: -moz-grab;
}

.b-grab_state_grabbing[class], x:-moz-any-link, x:default
{
    cursor: -moz-grabbing;
}

Строка , x:-moz-any-link, x:default – это хак, чтобы стили были видны только для Фаерфокса, если этого не сделать, то IE8 (в режиме IE8) увидит эти стили, съест и не будет нужного нам курсора.

Для IE7 стили будут почти такими же, но нужно убрать цифры 16 16, иначе будет баг, т.к IE7 не поддерживает такой синтаксис, то он будет стучаться по неправильному урлу бескончено и заметно заглючит.

.b-grab[class]
{
    cursor:url(b-grab.cur),move;
}

.b-grab_state_grabbing[class]
{
    cursor:url(b-grab_state_grabbing.cur),move;
}

Казалось бы на этом и сказка сказывается, да нет. В IE есть ещё одна проблема: если ваши css-файлы лежат на другом хосте, то пути к курсорам нужно указывать абсолютные! Иначе, несмотря на относительность пути в CSS, IE (именно для стилей курсора) будет стучаться на хост открытой страницы и получит 404.

Да ну нафиг этот IE с ним столько гемороя 

Если не хочется хачить, а сделать в IE стандартный курсор, то тут нужно быть предельно осторожными, если для IE ранее указано cursor: url то сброс его через задание cursor: move не даст эффекта и IE всё равно будет ходить по указанному url'у (а если он некорректный, то слать 404), поэтому если всё-таки очень хочется спрятать стили от IE, то можно как-то так:

.b-grab:not(b)
{
    cursor:url(b-grab.cur) 16 16,move;
}

.b-grab_state_grabbing:not(b)
{
    cursor:url(b-grab_state_grabbing.cur) 16 16,move;
}

Конечно, base64

Дальше я стал думать, где можно оптимизировать курсоры и я исследовал эту возможность. Из заголовка уже понятно, о чем речь. Естественно, глупо плодить целых два запроса за какими-то курсорами, тем более что в синтаксисе самого свойства запрятан такой механизм, что если браузер не понимает/не может отобразить курсор, он идет за следующим по списку.

Итак, новый синтаксис свойства:

.b-grab
{
    cursor:url(data:application/octet-stream;base64,AAACAAEAICAAAA8ADwAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH4AAAB+AAAA/gAAAf8AAAP/AAAD/4AAB/+AAA7/gAAM/8AAAP7AAAG2wAABtkAAAzYAAAM2AAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////AP///wD///4A///8AH//+AB///gAP//wAD//4AA//+AAH//yAB///AAf//wAH//4AL//+AD///yB////z///////////////////////////////////////8A), url(b-grab.cur) 16 16,move;
}

Написав это я вспомнил, что современные браузеры понимают gif и png в качестве курсора, ну и соответственно, что если закодировать в base64 не .cur, тем более что они и весит могут меньше. В итоге открыв .cur файл, я ужаснулся, внутри лежала картинка 32х32, несмотря на то что курсор размерами 16х16, тут прямо таки напрашивается оптимизация. В итоге, сохранил, сжал и получилось:

Спички спичками, а почти 400 байт сэкономили. Теперь CSS-код такой:

.b-grab
{
    cursor: url(data:image/gif;base64,R0lGODlhEAAQAJECAP///wAAAAAAAAAAACH5BAEAAAIALAAAAAAQABAAAAI0lC8RyLkBgFoMSotrVHsnhHWXdISS+DzRimIWy3Ii7CU0Tdn3mr93bvDBgMFfozg86mKHAgA7) 8 8, url(b-grab.cur) 16 16, move;
}

Запрос

И всё-таки, посмотрев в Firebug'е, я расстроился – Firefox стучится за курсором, указанным в url после закодированного нами в base64, поэтому нужно его оторвать совсем. В общем-то это не так страшно, потому что в любом случае курсор move остаётся, да и кода стало гораздо меньше!

В итоге метод с base64 работает в FF2+, Safari и Chrome, что уже достаточно неплохо. К сожалению в IE mhtml в этом подходе нельзя использовать (или я его неправильно готовлю) =( А в Опере кастомные курсоры не работают в принципе, как ни крути!

Вот что у меня получилось в итоге:

.b-grab
{
    cursor:url(b-grab.cur);
}

.b-grab_state_grabbing
{
    cursor:url(b-grab_state_grabbing.cur);
}

.b-grab:not(b)
{
    cursor:url(data:image/gif;base64,R0lGODlhEAAQAJECAP///wAAAAAAAAAAACH5BAEAAAIALAAAAAAQABAAAAI0lC8RyLkBgFoMSotrVHsnhHWXdISS+DzRimIWy3Ii7CU0Tdn3mr93bvDBgMFfozg86mKHAgA7) 8 8,move;
}

.b-grab_state_grabbing:not(b)
{
    cursor:url(data:image/gif;base64,R0lGODlhDQALAJECAP///wAAAAAAAAAAACH5BAEAAAIALAAAAAANAAsAAAIflBKXaBYAXoTswHtfshgv2VFgKJKZY0bNeDac575tAQA7) 6 3,move;
}


Дополнительно для почитать:

• Статья в MDN про курсоры

• Статья в MDN про использование url в значении курсора