Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

FireFox v22 - File Input type now shows browse on left

  • 10 replies
  • 55 have this problem
  • 8 views
  • Last reply by logicinfo12

RWAP
RWAP
more options

For some unknown reason, Firefox v22 has moved the BROWSE button on an <input type="file" statement.="" <="" p="">

The Browse button appears on the left hand side - this has previously only happened in Webkit based browsers.

I can force the button to the right hand side in webkit browsers by using:

input[type="file"].file::-webkit-file-upload-button { 

   float: right; 
   position: relative; 
   top: -1px; 
   right: -90px;

}

However, I can't find any similar means of adjusting the layout in Firefox.

For some unknown reason, Firefox v22 has moved the BROWSE button on an <INPUT type="file" statement. The Browse button appears on the left hand side - this has previously only happened in Webkit based browsers. I can force the button to the right hand side in webkit browsers by using: input[type="file"].file::-webkit-file-upload-button { float: right; position: relative; top: -1px; right: -90px; } However, I can't find any similar means of adjusting the layout in Firefox.

All Replies (10)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Are you using a RTL (right-to-left) locale version of Firefox?

Can you post a link to a publicly accessible page that doesn't require authentication (signing on)?

RWAP
RWAP Question owner
more options

I am used the standard LTR locale version - it worked fine before I upgraded to v22

For a test - see next post....

Modified by RWAP

RWAP
RWAP Question owner
more options

Actually on the bottom of this page forum (above the Post Reply button) appears BROWSE... No file selected

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Yes. That is a change that landed in Firefox 22 (bug 838675).

  • Bug 838694 - Move the text showing the file names to the right of the browse button for <input type='file'>

Please DO NOT comment in bug reports: https://bugzilla.mozilla.org/page.cgi?id=etiquette.html

RWAP
RWAP Question owner
more options

Fair enough it was changed - although no idea why (!) as to date, only Chrome has shown the BROWSE button on the left and personally, I think it looks ugly with the button inside the actual input box (see image)

What is missing (unlike Chrome) are any CSS controls to allow you to alter the button's look / layout - at least in Chrome you can use CSS based on:

input[type="file"].file::-webkit-file-upload-button{ }

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options
  • Bug 52500 - (input[type=file]) Make regular CSS properties apply on <input type='file'>
RWAP
RWAP Question owner
more options

I have found that - presumably it means that it will not change until v23 as I can't move the button in v22.

ultrageoff
ultrageoff
more options

I honestly think the file input is something that Internet Explorer (still) and previous FF had right and that Safari and Chrome have wrong. Styling the colour of text for inputs is now going to be a real problem - and when you have to tell the whole world how to cope with something, that's as real a problem as a doubled margin on a float was/is in IE6 - because the text color shown inside the box of a text input is also the text colour that is shown outside the box on a file input. Black text on a black background? 

If you are here, World, the solution is to put a background-color on all your inputs e.g. input {background-color: #FFF} .

The new input also removes the option to copy/paste link values, which can be a real pain if you are doing a lot of file uploading e.g. of photos identified by (long links with...) productids

TroyR
TroyR
more options

For us, the main issue is that we can no longer paste URLS into the input element. This has completely crippled our regression testing with Selenium. It is a critical issue for us.

logicinfo12
logicinfo12
more options

This is really an ugly issue and many are confused where the input box is seen. It is not appearing as a input element but is seen something else.

How come firefox team is not rectifying this issue. This question is open since July 2013.

Some suggestions above says to apply background color to input statement, that's true for our developed codes. But how to apply when we browse other's websites and applications where we can not do anything and browser is the only element who is supposed to do this job for us.

Thank you.

See in the following image, that input box is not seen here too...

Modified by logicinfo12