Как изменить размер кнопки входного файла?

Я работаю со стилизацией входного файла методом opacity - кнопка реального входного файла имеет непрозрачность 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>

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>