Search code examples
cssgoogle-chromemouse-cursor

CSS cursor zoom-in/out

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.

Solution

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

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

    Here is a jsfiddle.