HTML5: How to specify file input width?

Question

The W3C validator says: "Attribute size is not allowed when entering an item at this point."

<input type="file" name="foo" size="40" /> 

What is the correct way to specify file input width in HTML5?

Answer 1

Use the style attribute in the input field, this will allow you to use css.

<input type="file" name="foo" style="width: 40px" />

Or with a separate css:

 input[name="foo"] { width: 40px; } 

Answer 2

In your css file, specify the width as such:

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

http://jsfiddle.net/VbTAV/

Answer 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/