Home/ Questions/Q 7917263
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T15:05:10+00:00

I have a file upload button with a weird styling issue that I can’t

  • 0

I have a file upload button with a weird styling issue that I can’t seem to solve. the generated HTML is as follows:

<div id="uniform-file_upload" class="uploader">
<input id="file_upload" type="file" multiple="multiple" name="file_upload" size="55" style="opacity: 0;">
<span class="filename" style="-moz-user-select: none;">No file selected</span>
<span class="action" style="-moz-user-select: none;">Choose File</span>
</div>

And the output is as follows:

enter image description here

Can you see the little box around the words “Choose file”? Well, it is very ugly and distracting and I thought it should be easy to get rid of it but I can’t do it.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In a situation like this, a good debugging trick would be to use the Chrome web browser and try the Inspect Element option. Right-click the form button (in your web page) and choose “Inspect Element” (FireFox has something similar, but I prefer the Chrome one)

    The Styles information for the button appears on the side panel and you can tweak the styles to get the required effect.

    NB: Verify you have selected the correct html tag in the Elements tab section after clicking Inspect Element. Also, element.style {…} is an option in the side panel and it allows you to edit the inline css for the selected html element.

    • 0