15

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?

Brian Bi
  • 111,498
  • 10
  • 176
  • 312

5 Answers5

12

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;
}
silppuri
  • 327
  • 1
  • 4
7

In your css file, specify the width as such:

input[type=file] { width: 300px; border: 2px solid red; }

http://jsfiddle.net/VbTAV/

Dalex
  • 3,033
  • 2
  • 30
  • 23
  • 2
    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. – Brian Bi Nov 12 '12 at 09:20
  • True. The size attribute seems the way to handle Firefox, for now. – Dalex Nov 12 '12 at 19:07
  • 1
    `width` also works on Firefox nowadays. – djvg May 10 '23 at 08:45
1

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">
djvg
  • 11,722
  • 5
  • 72
  • 103
  • 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. – Martin May 10 '23 at 09:39
  • @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. – djvg May 10 '23 at 09:50
  • No, the third example shows "Bro...." on Firefox. – Martin May 10 '23 at 10:13
  • @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 May 10 '23 at 10:42
  • In the second example the entire button is clipped, cutting the border, etc. In the third example only the button text is clipped. Anyway, this is just an illustration. The intended message is: If you need to style the file selector button, which is part of the file input, you need to use `::file-selector-button`. – djvg May 10 '23 at 10:51
  • 1
    @Martin I modified the third example for convenient comparison of the cases with and without the `::file-selector-button`. Hope this helps. – djvg May 10 '23 at 11:04
0

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>
Silvio Guedes
  • 1,134
  • 15
  • 16
-3
<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>

http://jsfiddle.net/9bhcB/2/

Epsil0neR
  • 1,676
  • 16
  • 24