In chat, when you upload pictures, the "upload button" does not have a hover effect like the "upload" and "cancel" buttons do. Here is what I mean:

broken upload button

However, with the other buttons, they have a press-down effect:

ok button

I'm guessing this is a bug with the css?

Firefox, Ubuntu 14.04.2LTS
Chrome, Also Ubuntu 14.04.2LTS

Note: This is just hovering over the button, not pressing it
Another note: The upload button does not have a press mouse, but the cancel button does. Its just that my screenshot tool can't capture that.

  • 2
    That's because the browse button isn't a standalone button like the other two, but rather part of the <input type="file" /> HTML control. Blame the browser. – Shadow Wizard Jun 17 '15 at 9:31
  • Will try this with chrome soon – Universal Electricity Jun 17 '15 at 9:32
  • @ShadowWizard Can reproduce in chrome – Universal Electricity Jun 17 '15 at 9:40
  • If I reduce the width of the <input type="file" /> it is fixed (repro-ed and tested on IE11/Win7) – rene Jun 17 '15 at 9:43
  • @rene Yep. Blame the devs – Universal Electricity Jun 17 '15 at 9:45
  • 1
    haha, I was just kidding (by "blame the browser" ;-)). Oops. – Shadow Wizard Jun 17 '15 at 9:52
  • AHHH! With the bounty, why still no devs come to fix? – Universal Electricity Jun 26 '15 at 12:08

Okay. Got more on the bottom of this. The source of the issue is that SE already changes the UI (unlike as my previous answer) of the file button by using a shadow input type="file" element in the background.

The browse button is:

<input class="button" type="button" name="choose-file" id="choose-file" value="browse…" style="width: 7em; margin-left: 5px;">

This should have been:

<button class="button" type="button" name="choose-file" id="choose-file" value="browse…" style="width: 7em; margin-left: 5px;">

Then it shows the hover.

  • Sorry but you're wrong. As this test proves, the input of type file does support hover effect, they only have to attach it. – Shadow Wizard Jun 17 '15 at 9:51
  • @ShadowWizard: It changes the text hover, not the button hover. – Patrick Hofman Jun 17 '15 at 9:52
  • hmm.... let me see about background... – Shadow Wizard Jun 17 '15 at 9:53
  • @ShadowWizard: background-color doesn't work. Tested already. – Patrick Hofman Jun 17 '15 at 9:54
  • Oh well, guess you're right then - it's kind of surprising they were able to style it same way as the other buttons. :) – Shadow Wizard Jun 17 '15 at 9:57
  • @ShadowWizard: Thanks for the pointer. Got it diagnosed now. – Patrick Hofman Jun 17 '15 at 10:01
  • ha! Didn't notice they use a custom button... guess I didn't dig deep enough. :) – Shadow Wizard Jun 17 '15 at 10:02
  • @ShadowWizard: It was stuffed away in another div, but Chrome hit the wrong element when doing 'Inspect element'. – Patrick Hofman Jun 17 '15 at 10:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .