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

发布于 2025-01-02 21:25:18 字数 1072 浏览 0 评论 0原文

我正在使用不透明度方法处理输入文件样式 - 实际输入文件按钮的不透明度为 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>

原文

I am working with styling input file with opacity method - real input file button has opacity 0 and in front of it, using z-index is another input (with opacity: 1). Unfortunatelly I want my visible button to be squared picture (width:height: 1:1) - and unvisible input file is always rectangular (input box and select box with aspect ratio about 1:10). Question is - how to resize input file button to be squared (or any size) to make whole visible button area clickable (because only clicking invisible button causes opening browser window). Now only part of on visible button is "clickable".

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苏璃陌 2025-01-09 21:25:18

我们也有过类似的案例。

它不是超级优雅，但您可以尝试如下操作，而不是放置多个文件输入：

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

如此处演示（基于在斯科特的演示中）

仅适用于火狐浏览器

回复收藏 0 原文

凡间太子 2025-01-09 21:25:18

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

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

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

To shorten input type file button clickable area you can try to use this:

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

This will narrow the clickable area of input type file. (You can use transform: scale(x,y) - with x and y is number that will fits your need.
Remember to add proper styling for mobile devices or different browsers.

回复收藏 0 原文