如何更改输入文件按钮大小？

Question

新手上路，请多包涵

我正在使用不透明度方法处理输入文件样式 - 实际输入文件按钮的不透明度为 0，在它前面，使用 z-index 是另一个输入（不透明度：1）。不幸的是，我希望我的可见按钮是方形图片（宽度：高度：1：1） - 并且不可见的输入文件始终是矩形（输入框和选择框的纵横比约为 1:10）。问题是 - 如何将输入文件按钮的大小调整为方形（或任何大小）以使整个可见按钮区域可单击（因为仅单击不可见按钮会导致打开浏览器窗口）。现在只有部分可见按钮是“可点击的”。

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>

和 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>