Arbitrary view of the file field in html-form, the same in all browsers

Despite the development, introduction of new standards and brows in browsers, there are no uniform standards for how to display the /> element by default. Moreover, this element has no attributes that allow it to be stylized to some extent.
Because of the need to bring this form field to a uniform form in all browsers and “fit” into the developed design, after searching and analyzing materials on the Internet, a method was developed to replace the form field form with html + css, and js to extend functionality.

What does this field look like by default?

<input id="upload" type="file" name="upload" /> 

So it looks like in Internet Explorer 9:


And so - in Firefox:

')
In Google Chrome:


In Opera:


In Safari:

Field stylization file

In the place where the file selection field should be, insert the following code:

 <div class="fileform"> <div class="selectbutton"></div> <input id="upload" type="file" name="upload" /> </div> 

Add the following blocks to the style file:

 .fileform { background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 2px; cursor: pointer; height: 26px; overflow: hidden; padding: 2px; position: relative; text-align: left; vertical-align: middle; width: 230px; } .fileform .selectbutton { background-color: #A2A3A3; border: 1px solid #939494; border-radius: 2px; color: #FFFFFF; float: right; font-size: 16px; height: 20px; line-height: 20px; overflow: hidden; padding: 2px 6px; text-align: center; vertical-align: middle; width: 50px; } .fileform #upload{ position:absolute; top:0; left:0; width:100%; -moz-opacity: 0; filter: alpha(opacity=0); opacity: 0; font-size: 150px; height: 30px; z-index:20; } 

Now, in all browsers, the form field looks the same, while the file selection form still appears by clicking on the field and on the button:


The main drawback of the received solution from the standard form is that it does not visually signal that the file has been selected. This problem is solved using javascript.

Adding a caption about the selected file

Add an event handler function to the field, and another block header to the block and, of course, its style:

 <div class="fileform"> <div id="fileformlabel"></div> <div class="selectbutton"></div> <input type="file" name="upload" id="upload" onchange="getName(this.value);" /> </div> 

 .fileform #fileformlabel { background-color: #FFFFFF; float: left; height: 22px; line-height: 22px; overflow: hidden; padding: 2px; text-align: left; vertical-align: middle; width:160px; } 

The handler function itself receives the full name of the selected file, discards the path (with checking for different file systems), saves the name with the extension to the filename variable and writes it into the fileformlabel block.

 function getName (str){ if (str.lastIndexOf('\\')){ var i = str.lastIndexOf('\\')+1; } else{ var i = str.lastIndexOf('/')+1; } var filename = str.slice(i); var uploaded = document.getElementById("fileformlabel"); uploaded.innerHTML = filename; } 

Now the form field looks like this (you can change its size, color, font and alignment):



This note is an implementation of the method proposed in the article “Customizing input type =” file ”with CSS”