Skip to main content
added 554 characters in body
Source Link
Patrick Hofman
  • 91.8k
  • 19
  • 142
  • 342

Yes, I can reproduce that too, and itOkay. Got more on the bottom of this. The source of the issue is becausethat SE already changes the UI (unlike as my previous answer) of the file button by using a shadow input type="file" vs. button HTML element usedin the background.

The styling of the button of an input type="file"browse button is very hard and can only be accomplished by hacking the style in using a label, or similar solutions. (See this related question on SO: Cross-browser custom styling for file upload button)

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

SE either has to hack their way around this 'bug' or keepThis should have been:

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

Then it as is losingshows the style, but keeping it working. I am not sure what's more importanthover.

Yes, I can reproduce that too, and it is because of the input type="file" vs. button HTML element used.

The styling of the button of an input type="file" is very hard and can only be accomplished by hacking the style in using a label, or similar solutions. (See this related question on SO: Cross-browser custom styling for file upload button)

SE either has to hack their way around this 'bug' or keep it as is losing the style, but keeping it working. I am not sure what's more important.

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.

Source Link
Patrick Hofman
  • 91.8k
  • 19
  • 142
  • 342

Yes, I can reproduce that too, and it is because of the input type="file" vs. button HTML element used.

The styling of the button of an input type="file" is very hard and can only be accomplished by hacking the style in using a label, or similar solutions. (See this related question on SO: Cross-browser custom styling for file upload button)

SE either has to hack their way around this 'bug' or keep it as is losing the style, but keeping it working. I am not sure what's more important.