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

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>

Answer 1

我们有一个类似的案例。

它不是非常优雅，但您可以尝试以下操作，而不是输入多个文件:

• 增加输入的字体大小以增加按钮的宽度
• 设置父相关元素overflow:hidden
• (可选)将高度设置为 100%

如 demo here (基于 Scott 的演示)

只适用于 Firefox