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

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%

就像在这里的演示(基于Scott的演示)

仅适用于Firefox

Answer 2

尝试使用“图像”输入类型？

否则，您必须确保在输入按钮上设置 display: block 参数。