CSS cursor input / output

Question

I have buttons to increase or decrease the content. In firefox, the cursor works well (its like a magnifying glass with +). But in chrome, I have a default pointer. This is my code:

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

Can someone help me why this works in forefox and chrome? In addition, other cursors such as help, move, pointer ... also work in chrome.

Answer 1

For Chrome, you should use the prefixed-property value:

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

Here is the jsfiddle .

Answer 2

This Mozilla page is a great link to various cursors, as well as browser compatibility for everyone.

Chrome 1.0+, Firefox 1.0+, Opera 11.6+ Safari 3.0+ . / IE.

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