Styling File Selector Controls

A styled file selector control is shown above. The styling technique makes use of three controls

A file input control made fully transparent by setting opacity:0
A text input control placed above the file control by using a suitable z-index value
A button input control placed to the immediate right of the text input control. We assign a z-index value here too but so as to place the button below the default button associated with the file input control.

When the user clicks on what he/she believes to be the browse button the click is actually received by the default file input control button that lies above but is invisible because of the opacity setting.

When the user selects a file the onchange event is triggered and causes the selected file name to appear in the text input control. We prevent the user from directly editing the selected file name by setting the readonly attribute of the text input control

The solution we give here is only an outline. It is relatively easy to modify and adapt it to produce specific presentational effects. The skeleton code needed is given below



<html>
   <head>
      <style>
         .fakediv{position:absolute}
         .edtfile{position:absolute;opacity:0;filter:alpha(opacity=0);z-index:2}
         .edtfake{position:absolute;z-index:3}
        .btnfake{position:absolute;z-index:1}
      </style>
      <script>
         function WhenChanged(){
           var e1 = document.getElementById("real")
           var e2 = document.getElementById("fake")
           if (e == null) return; 
           e2.value=e1.value;} 
      </script>            
   </head>
   <body>
      <div class="fakediv">
         <form>
            <input class="edtfile" type="file" id="real" onchange="WhenChanged()" />
            <input class="edtfake" type="text" id="fake" />
            <input class="btnfake" type="button" value="..." />        
         </form>
      </div>      
   </body>
<html>

The outside div, "fakediv" is required for proper positioning of the three form controls. Here it is absolutely positioned. However, position:relative would work just as well.
Note the absolute positioning of the three form controls.
In practice you will have to specify the left and top properties as well in order to ensure correct positioning of the three controls. The precise values will depend on the font in use. It is best to use em units. We discuss this here.
Note how z-index values have been used to correctly layer the three controls.
- The setting z-index:3 for the fake file control ensures that it fully obscures the real file control which has z-index:2.
- The setting z-index:1 for the fake browse button places it below the real file control. However, since the latter is fully transparent the fake button shows through.
Note the opacity setting. This ensures that the real file control is fully transparent.

Needless to say, in practice you would need to provide a form action attribute, the name attribute for the real file control, a submit button etc.

A final word - the technique described here would usually be classed as a browser exploit, i.e. a piece of code designed to make the browser do something unsafe.

▼Jump To...

◄ ►