Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to set width of <input type='file'/> for showing in Firefox?

All the CSS attributes apply to the <input type='file'/> don't work on FF, but work on most other browsers.

Just can't even set the width. Any solution? No JS please.

like image 654
jondinham Avatar asked Nov 25 '11 08:11

jondinham


People also ask

How do you change the input field width?

Definition and Usage The width attribute specifies the width of the <input> element. Note: The width attribute is used only with <input type="image"> . Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded.

How do you set the length of an input number in HTML?

Input value length You can specify a minimum length (in characters) for the entered value using the minlength attribute; similarly, use maxlength to set the maximum length of the entered value, in characters. The example below requires that the entered value be 4–8 characters in length.

How do I change the default value of an input type file?

The only way to set the value of a file input is by the user to select a file. This is done for security reasons. Otherwise you would be able to create a JavaScript that automatically uploads a specific file from the client's computer.


3 Answers

Have you set the size attribute?

<input type="file" name="datafile" size="40">

Firefox doesn't support setting the size via CSS.

like image 199
Chris Felstead Avatar answered Oct 04 '22 15:10

Chris Felstead


I wouldn't have a clue if anyone still finds this thread, but just in case...

input[type="file"] {
max-width: 100%;
}

...worked for me. Cuts the overlap off, but at least it doesn't over- or underlap anymore

like image 43
Chris Avatar answered Oct 04 '22 15:10

Chris


What if

<input type="file" name="file_to_upload" id="file_to_upload" style="max-width:75px;"> 

For me works in FF 37.0.1. But possibly in older versions does not work

like image 23
Andris Avatar answered Oct 04 '22 14:10

Andris