How to change input file button size?

Question

I am working with styling input file with opacity method - real input file button has opacity 0 and in front of it, using z-index is another input (with opacity: 1). Unfortunatelly I want my visible button to be squared picture (width:height: 1:1) - and unvisible input file is always rectangular (input box and select box with aspect ratio about 1:10). Question is - how to resize input file button to be squared (or any size) to make whole visible button area clickable (because only clicking invisible button causes opening browser window). Now only part of on visible button is "clickable".

CSS:

   <style type="text/css">
   .upload {
        position:relative;
    width:100px;
   }

   .realupload {
    position:absolute;
    top:0;
    right:0;
    opacity:0.5;
    -moz-opacity:0.5;
    filter:alpha(opacity:0.5);
    z-index:2;
    width:100px;
   }

   form .fakeupload {
    background: url(images/bglines.png);
   }

   form .fakeupload input {
    width:0px;
   }

   </style>

And html:

<form>
   <li class="upload">
    <div class="fakeupload">
        <input type="text" name="fakeupload" style="opacity: 0;"/>
    </div>
    <input type="file" name="upload" id="realupload" class="realupload" onchange="this.form.fakeupload.value = this.value;" style="font-size: 5px;" />
   </li>
   </form>

Answer 1

We had a similar case.

It's not super elegant but instead of putting multiple file input you can try as following:

• increased the font-size of the input to increase the width of the button
• set the parent relative element overflow:hidden
• (optional) Set the height to 100%

As in the demo here (based on Scott's demo)

Only works on Firefox

Answer 2

try using the "image" input type?

Otherwise you'll have to be sure to set the display: block parameter on the input button.