Question

（读下编辑）

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

第一：小提琴

我想做的是＆＃34;改变＆＃34;输入类型的样式=＆＃34;文件＆＃34;。所以我做的是设置它的不透明度：0然后尝试使它如果完全适合他的父div，那么当用户点击父div的任何部分时，将点击输入（我无法通过javascript执行此操作，因为我还希望用户将文件拖放到输入中。我无法通过javascript将输入更改为上传管理器，我必须通过输入标记执行此操作。

我知道css有点大，但重要的东西只是最后两个规则，修改输入＆amp;形成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是位置：relative，那么如果完全适合div（我想要的）但是thext离开div，如果我把position：absolute放到form中，那么文本正是我想要的地方，但FORM变得更大（远远超过div）。我想要的是：形式是位置：绝对并保持它的宽度和高度为div的100％，而不是更多，而不是更少。

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

Answer 1

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

像这样：

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

你需要微调＆＃39;边距和填充以适合div容器。

Answer 2

http://jsfiddle.net/2RHfL/5/ 边界有点偏，但你想要的效果就在那里。你的HTML＆amp; CSS很难阅读和阅读凌乱，我建议进行一些重构。

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

Answer 3

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

<label for="uploadPictureInput">

这将在您与其进行互动时激活文件输入（您甚至可以用它替换您的＆＃34; ux-hotels-reviews-upload-info＆＃34; div）。

虽然我认为你仍然需要使用javascript进行拖放工作。

Answer 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"而未显示的文件输入。

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

4 个答案: