2

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.

Improve this question
7
  • 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
    Commented Jun 17, 2015 at 9:31
  • Will try this with chrome soon
    – Universal Electricity
    Commented Jun 17, 2015 at 9:32
  • @ShadowWizard Can reproduce in chrome
    – Universal Electricity
    Commented Jun 17, 2015 at 9:40
  • If I reduce the width of the <input type="file" /> it is fixed (repro-ed and tested on IE11/Win7)
    – rene Mod
    Commented Jun 17, 2015 at 9:43
  • @rene Yep. Blame the devs
    – Universal Electricity
    Commented Jun 17, 2015 at 9:45
  • 1
    haha, I was just kidding (by "blame the browser" ;-)). Oops.
    – Shadow Wizard
    Commented Jun 17, 2015 at 9:52
  • AHHH! With the bounty, why still no devs come to fix?
    – Universal Electricity
    Commented Jun 26, 2015 at 12:08

1 Answer 1

Reset to default
7

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.

Improve this answer
8
  • 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
    Commented Jun 17, 2015 at 9:51
  • @ShadowWizard: It changes the text hover, not the button hover.
    – Patrick Hofman
    Commented Jun 17, 2015 at 9:52
  • hmm.... let me see about background...
    – Shadow Wizard
    Commented Jun 17, 2015 at 9:53
  • @ShadowWizard: background-color doesn't work. Tested already.
    – Patrick Hofman
    Commented Jun 17, 2015 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
    Commented Jun 17, 2015 at 9:57
  • @ShadowWizard: Thanks for the pointer. Got it diagnosed now.
    – Patrick Hofman
    Commented Jun 17, 2015 at 10:01
  • ha! Didn't notice they use a custom button... guess I didn't dig deep enough. :)
    – Shadow Wizard
    Commented Jun 17, 2015 at 10:02
  • @ShadowWizard: It was stuffed away in another div, but Chrome hit the wrong element when doing 'Inspect element'.
    – Patrick Hofman
    Commented Jun 17, 2015 at 10:03

You must log in to answer this question.

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