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.

Blackbam · Accepted Answer · 2016-03-18 19:19:17Z

21

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.

edited Mar 18, 2016 at 19:19

answered Mar 18, 2016 at 19:01

Blackbam

19.7k31 gold badges112 silver badges167 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robert Over a year ago

How is the image resetting the cursor?

Blackbam Over a year ago

Edited the answer.

Nutshell · Accepted Answer · 2016-03-18 19:02:18Z

1

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

answered Mar 18, 2016 at 19:02

Nutshell

8,5251 gold badge21 silver badges38 bronze badges

Comments

Joshua Shearer · Accepted Answer · 2016-03-18 20:34:20Z

1

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/

edited Mar 18, 2016 at 20:34

Joshua Shearer

1,12010 silver badges23 bronze badges

answered Mar 18, 2016 at 19:28

Brahim Chougrani

611 silver badge6 bronze badges

Collectives™ on Stack Overflow

CSS cursor pointer on div not working

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related