FireFox v22 - File Input type now shows browse on left
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.
All Replies (10)
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)?
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
Actually on the bottom of this page forum (above the Post Reply button) appears BROWSE... No file selected
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
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{ }
- Bug 52500 - (input[type=file]) Make regular CSS properties apply on <input type='file'>
I have found that - presumably it means that it will not change until v23 as I can't move the button in v22.
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
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.
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