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

我们有类似的案例。

它不是超级优雅，但您可以尝试以下方式而不是输入多个文件：

增加字体大小的输入以增加按钮的宽度
设置父相对元素溢出：隐藏
（可选）将高度设置为100％

与demo here一样（基于Scott的演示）

仅适用于Firefox

Answer 2

要缩短输入类型文件按钮可点击区域，您可以尝试使用此功能：

form .fakeupload input {
    width:20px;
    transform: scale(0.23,1);
}

这将缩小输入类型文件的可点击区域。（你可以使用transform：scale（x，y） - x和y是符合你需要的数字。请记住为移动设备或不同的浏览器添加适当的样式。

Answer 3

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

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

Answer 4

HTML格式错误可能是问题所在。 - 您不能在li标签之外使用表单标签。

这似乎对我很好..... Demo here

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

4 个答案: