CSS cursor zoom-in/out

Question

I have buttons to zoom-in or zoom-out content. In firefox cursor works well (its like magnifier with +). But in chrome I have default cursor. This is my code:

.button.zoom-in {
   ...
   cursor: zoom-in;
}

Can someone help me, why that works in forefox and in chrome not? Also, other cursors like help, move, pointer... works in chrome too.

Answer 1

For Chrome you have to use the prefixed-property-value:

.button.zoom-in {
   ...
   cursor: -webkit-zoom-in;
   cursor: zoom-in;
}

Here is a jsfiddle.

Answer 2

This page from Mozilla is an excellent reference to different cursors as well as browser compatibility for each.

For the zoom-in and zoom-out cursors, the following should work for Chrome 1.0+, Firefox 1.0+, Opera 11.6+ and Safari 3.0+. Zoom-in/out is not supported by IE.

.button.zoom-in {
    cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}