如何“;改变“;输入类型文件样式

How to "change" input type file style

本文关键字：文件 样式 类型 改变 如何 输入      更新时间：2023-09-26

(读取编辑(

所以我一直在努力做这件事，但我想不通。

第一：小提琴

http://jsfiddle.net/2RHfL/

我想做的是"更改"输入type="file"的样式。所以我所做的是设置它的不透明度：0，然后尝试使它完全适合他的父div，这样当用户点击父div的任何部分时，输入都会被点击(我不能通过javascript来做到这一点，因为我还希望用户拖放文件来输入(。我不能通过javascript更改上传管理器的输入，我必须通过input标签来完成。

我知道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(我想要的(，但文本超出了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%;
        }

如果我正确理解您想要做什么，那么您必须在.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容器。

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;
}

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

<label for="uploadPictureInput">

当你与它交互时，这将激活文件输入(你甚至可以用它替换你的"ux hotels reviews upload info"div(。

尽管我认为您仍然必须使用javascript进行拖拽；去上班。

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

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

相关文章：