Question

任何人都可以帮我改变输入类型＆＃39; file＆＃39;在HTML中。我引用了以下链接但我的问题没有解决。我需要给浏览按钮添加颜色，当我尝试将样式应用于浏览按钮时，文本框消失，我无法看到我在文本框中选择了什么文件。这是我的代码：

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

Answer 1

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

Answer 2

按钮消失的原因是因为你有opacity: 0因此完全，完全，彻底和完全透明。即无形。 HG Well的隐形人通过给自己一个零的不透明度来做到这一点！尝试使用opacity: 0.5等值。

但也需要Irfan的答案，以纠正你的语法。

Answer 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

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

3 个答案: