본 사이트는 여러분의 사용자 경험을 개선하기 위해 유지 보수를 진행하는 동안 기능이 제한됩니다. 도움말로 문제가 해결되지 않고 질문을 하고 싶다면 Twitter의 @FirefoxSupport 및 Reddit의 /r/firefox 채널을 활용하세요.

Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

자세히 살펴보기

FireFox v22 - File Input type now shows browse on left

  • 10 답장
  • 55 이 문제를 만남
  • 1 보기
  • 최종 답변자: logicinfo12

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.

모든 댓글 (10)

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)?

more options

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

For a test - see next post....

글쓴이 RWAP 수정일시

more options

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

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

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{ }

more options
  • Bug 52500 - (input[type=file]) Make regular CSS properties apply on <input type='file'>
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.

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

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.

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...

글쓴이 logicinfo12 수정일시