Html 输入类型文件样式更改不起作用答案

【问题标题】：Html input type File style changes are not workingHtml 输入类型文件样式更改不起作用
【发布时间】：2017-08-01 17:47:24
【问题描述】：

谁能帮我改变html中输入类型'file'的样式。我提到了以下链接但我的问题没有解决。我需要为浏览按钮添加颜色，当我尝试将样式应用于浏览按钮时，文本框消失了，我看不到我在文本框中选择了什么文件。这是我的代码：

<div id="fileimport">
    <div class="fileupload">
        <input type="file" name="Upload" style="position: relative" />
    </div>
</div>

input.file {
    position: relative;
    text-align: right;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}

div.fileupload {
    position: relative;
}

$('input[type=file]').on('change', prepareUpload);
function prepareUpload(event) {
    files = event.target.value;
    if (files != null) {
        $("#ShiftValidate").prop('disabled', false);
    }
}

【问题讨论】：

标签： jquery html css

【解决方案1】：

input[type=file] {
    position: relative;
    text-align: right;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}

【讨论】：

【解决方案2】：

按钮消失的原因是因为您拥有opacity: 0，从而使其完全、完全、彻底和完全透明。 IE。无形的。 HG Well 的隐形人通过给自己的不透明度为零来做到这一点！尝试使用 opacity: 0.5 之类的值。

但也需要 Irfan 的回答来纠正您的语法。

【讨论】：

【解决方案3】：

基本上，您需要隐藏文件输入并将其替换为包装元素。然后你需要做一些js来获取你正在上传的文件的名称并将其放入另一个输入中。

<div class="btnWrap"> <span class="text">Choose file</span> <input type="file" name="file"> </div> <input type="text" class="fileNames" value="No file selected">

我为你做了一支笔：http://codepen.io/eplehans/pen/gbpZoQ

【讨论】：