CSS cursor pointer on div not working

Question

I want to changer the cursor type on a div but it is not working.

HTML:

<div class='upload-wrapper'>
  <label for='file-input'>
    <img src='http://i.imgur.com/MIY6LmH.png' alt='Upload File' title='Upload File' width='250' height='250'>
  </label>
  <input type='file' name='photo' id='file-input'>
</div>

CSS:

.upload-wrapper {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    cursor: pointer;
}

.upload-wrapper img {
    width: 250px
    height: 280px;
}

.upload-wrapper input {
    display: none;
}

Result: https://jsfiddle.net/m7tctnvh/

Thanks in advance for solutions but I would also want to know why the CSS is not working as expected.

Answer 1

The image (or label tag) is resetting the cursor. The following works:

.upload-wrapper img {
    width: 250px
    height: 280px;
  cursor:pointer;
}

Edit: Inherited from label (user agent stylesheet):

label {
    cursor: default;
}

So this is a browser default. Maybe not in any browser. However you have to be specific.

Tipp: You may use reset CSS in your projects (http://meyerweb.com/eric/tools/css/reset/). This causes much less pain with browser defaults.

And by-the-way

label {
cursor:inherit;
}

also solves the problem and is maybe more what you want.

Answer 2

See this fiddle

.upload-wrapper img {
    width: 250px;
    cursor:pointer; 
}

You have to put it on the img and you forget to add ";" after width property

Answer 3

you forget to put ; in .upload-wrapper img and you need to put the cursor when hovering over the image so your code should look like this:

.upload-wrapper {
    width: 250px;   
    height: 250px;
    margin: 0 auto;
}

.upload-wrapper img {
    width: 250px;
    height: 280px;
    cursor: pointer;
}

.upload-wrapper input {
    display: none;
}

https://jsfiddle.net/84rgb45o/