The W3C validator says: "Attribute size not allowed on element input at this point."
<input type="file" name="foo" size="40" />
What is the correct way to specify the width of a file input in HTML5?
-
stackoverflow.com/questions/4909228/style-input-type-fileSirko– Sirko2012-11-12 09:07:33 +00:00Commented Nov 12, 2012 at 9:07
Add a comment
|
5 Answers
In the input field use the style attribute, this allow you to use css.
<input type="file" name="foo" style="width: 40px" />
Or with separate css:
input[name="foo"] {
width: 40px;
}
4 Comments
Brian Bi
Firefox ignores the "width" property. That was the first thing I tried.
silppuri
Ahh of course. Then I think you should support the width property and the size for cross browser compatibility. Or try workarounds suggested in link posted by @Sirko.
silppuri
If you come up with an answer to your problem please let me know :)
djvg
width also works on Firefox nowadays.In your css file, specify the width as such:
input[type=file] { width: 300px; border: 2px solid red; }
3 Comments
Brian Bi
I'm on Firefox, and in your example, it's actually the "size" attribute that controls the width (even though it's not allowed), and not the "width" property. I tried changing "width" in your example to 200 or 400, and it has no effect.
Dalex
True. The size attribute seems the way to handle Firefox, for now.
djvg
width also works on Firefox nowadays.As recommended in the other answers, the width of the entire file input, i.e. button and filename text, can be set using CSS as follows:
input[type="file"] {
/* functional */
width: 100%;
/* cosmetic */
background-color: steelblue;
}<input type="file">(This also works in Firefox nowadays.)
However, this does not change the width of the file select button. This may cause problems such as clipping, as illustrated in the following snippet.
input[type="file"] {
width: 40px;
}<input type="file">To modify the file select button width (and/or other button styling), you can use the ::file-selector-button pseudo element. For example:
input[type="file"] {
width: 40px;
}
input:last-of-type::file-selector-button {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* cosmetic */
body {
display: flex;
flex-direction: column;
gap: 8px;
}<input type="file">
<input type="file">6 Comments
Mm-Art-In
This doesn't quite do what you describe. On Firefox the 2nd and 3rd code examples show the width covering the whole input (button and file name area) rather than just the button. The button should be a child of the file input in CSS.
djvg
@martin Sorry, I'm not quite sure what you mean. Could you clarify? Perhaps my description is not sufficiently clear: The second code example should show a clipped button without filename area. The third example should show a complete button without filename area. Afaik the button is an intrinsic part of the file input, hence the need for the special selector.
Mm-Art-In
No, the third example shows "Bro...." on Firefox.
djvg
@Martin Yes, that's intentional. By "complete button" I meant the button element, including rounded corners, etc. The default button text does not fit, so it is clipped, with ellipsis, as specified in the example's
text-overflow.djvg
@Martin I modified the third example for convenient comparison of the cases with and without the
::file-selector-button. Hope this helps. |
You need to put the 'input' inside a div:
<div style="width: 40%">
<input class="d-flex justify-content-end align-items-center" style="background-color: yellow; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%" type="file" id="file"/>
</div>
Comments
<form class="upload-form">
<input class="upload-file" data-max-size="2048" type="file" >
<input type=submit>
</form>
<script>
$(function(){
var fileInput = $('.upload-file');
var maxSize = fileInput.data('max-size');
$('.upload-form').submit(function(e){
if(fileInput.get(0).files.length){
var fileSize = fileInput.get(0).files[0].size; // in bytes
if(fileSize>maxSize){
alert('file size is more then' + maxSize + ' bytes');
return false;
}else{
alert('file size is correct- '+fileSize+' bytes');
}
}else{
alert('choose file, please');
return false;
}
});
});
</script>
