如何“更改”输入类型文件样式答案

【问题标题】：How to "change" input type file style如何“更改”输入类型文件样式
【发布时间】：2014-11-30 23:34:05
【问题描述】：

（阅读编辑）

所以我一直在尝试这样做，但我无法弄清楚。

FIRST：小提琴

我想做的是“改变”输入类型=“文件”的样式。所以我所做的是设置它的 opacity: 0 然后尝试使它完全适合他的父 div，这样当用户点击父 div 的任何部分时，输入将被点击（我不能通过 javascript 执行此操作，因为我还希望用户拖放文件以输入）。我无法通过 javascript 将输入更改为上传管理器，我必须通过输入标签执行此操作。

我知道 css 有点大，但重要的只是最后两条规则，它们修改了输入和表单 css 样式：

.ux-hotels-reviews-upload .formAddDoc {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.ux-hotels-reviews-upload .formAddDoc .inputFile {
  position: absolute;
  cursor: pointer;
  /*opacity: 0;*/
 /* font-size: 10000px;
  border: 10000px solid transparent;
  right: -1000px;
  top: -1000px;*/
}

所以，我想要的是：如果用户在父 div (.ux-hotels-reviews-upload) 上单击/拖放文件，则单击/拖放到输入，但输入必须具有他的不透明度0 并且 div 中的项目应该看起来像现在一样。（您可以看到，注释 opacity:0 规则只是出于测试原因。

如果我忘了提什么，请告诉我。

编辑：我制作了一个新的小提琴，使其更具可读性和易于理解我的问题，而且我认为我更接近解决方案：

http://jsfiddle.net/fLfce/

如您所见，如果 FORM 带有 position: relative，那么如果完全适合 div（我想要的）但是 thext 会超出 div，如果我将 position: absolute 放入表单，那么文本正好在我想要的位置，但 FORM 变得更大（比 div 大得多）。我想要的是：位置的形式：绝对，并将其宽度和高度保持在 div 的 100%，而不是更多，而不是更少。

        form {
            position: absolute;
            border: 1px solid blue;
            width: 100%;
            height: 100%;
        }
        input {
            border: 1px solid blue;
            width: 100%;
            height: 100%;
        }

【问题讨论】：

标签： javascript html css

【解决方案1】：

如果我正确理解您想要做什么，那么您必须在 .ux-hotels-reviews-upload .formAddDoc .inputFile 文件上使用带有正填充的负边距和 z-index。

像这样：

.ux-hotels-reviews-upload .formAddDoc .inputFile {
    cursor: pointer;
    margin: -30%;
    opacity: 0;
    padding: 31%;
    position: absolute;
    z-index: 9999;
}

您需要“微调”边距和内边距以适合 div 容器。

【讨论】：

没看懂，试了一下，输入到了div的右半边

【解决方案2】：

http://jsfiddle.net/2RHfL/5/ 边框有点偏离，但你想要的效果就在那里。您的 HTML 和 CSS 非常难以阅读且凌乱，我建议您进行一些重构。

input[type=file]{
    opacity: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    color: white;
    z-index: 10;
}

【讨论】：

是的，但这仅在 div 位于页面顶部时才有效，当它不在时，表单将保持在页面顶部:(
然后使用top和bottom向下/向上移动

【解决方案3】：

我要做的是将要显示的区域包装为标签，指向文件输入，如下所示：

<label for="uploadPictureInput">

这将在您与之交互时激活文件输入（您甚至可以用它替换您的“ux-hotels-reviews-upload-info”div）。

虽然我认为您仍然必须使用 javascript 进行拖放操作。

【讨论】：

【解决方案4】：

<input type="file" name="file" id="file" style="display:none"/>
<div onclick="file.click()" ondragdrop="file.dragdrop()">Text</div>

<div> 的作用类似于您提到的父 div，但不包含由于style="display:none" 而未显示的文件输入。

【讨论】：