Javascript Alter input type="；文件"；标签内容

我想知道是否有任何方法可以隐藏或更改默认标签的内容：

No file selected

for

<input type="file" id="myFileInput"/>

---

有什么想法吗？

您不能将输入文件设计更改为每个浏览器的本机设计。但你仍然可以模拟它，抱歉，哈奇：

选择文件。。。
没有文件选择或其他。。。
​

JS:

$（函数（）{
$（'#btn_myFileInput'）。数据（'default'，$（'label[for=btn_myFileInput]）。文本（）。单击（函数（）{
$（'#myFileInput'）。单击（）
});
$（'#myFileInput'）。on（'change'，function（）{
var files=this.files；
如果（！files.length）{
$（'label[for=btn_myFileInput]'）。文本（$（'btn_myFileInput'）。数据（'default'））；
返回；
}
$（'label[for=btn_myFileInput]'）。空（）；
for（var i=0，l=files.length；i

不能将输入文件设计更改为每个浏览器的本机设计。但你仍然可以模拟它，抱歉，哈奇：

选择文件。。。
没有文件选择或其他。。。
​

JS:

$（函数（）{
$（'#btn_myFileInput'）。数据（'default'，$（'label[for=btn_myFileInput]）。文本（）。单击（函数（）{
$（'#myFileInput'）。单击（）
});
$（'#myFileInput'）。on（'change'，function（）{
var files=this.files；
如果（！files.length）{
$（'label[for=btn_myFileInput]'）。文本（$（'btn_myFileInput'）。数据（'default'））；
返回；
}
$（'label[for=btn_myFileInput]'）。空（）；
for（var i=0，l=files.length；i

你也可以这样做，但这是一种黑客行为：

<input type="file" id="myFileInput" name="html" style="width: 90px;" onchange="this.style.width = '100%';"/>

---

你也可以这样做，但这是一种黑客行为：

<input type="file" id="myFileInput" name="html" style="width: 90px;" onchange="this.style.width = '100%';"/>

Chrome也给了我这个问题。我试图设置各种各样的CSS选择器，但似乎没有什么效果。然而，我确实通过使用FORM元素找到了一个解决方案

将输入命名为[type=file]元素
命名表单元素并将输入[type=file]放入其中
创建一个跨距，并将其放置在表单中输入的下方。这将是你的标签
使用CSS将输入的高度设置为0px，不透明度设置为0，这将使其不可见
使跨距绝对定位并向左0px

#文件{
高度：0px；
不透明度：0；
}  
#跨度{
左：0px；
位置：绝对位置；
光标：指针；
}
我的文件标签！！！！
var span=document.getElementById（“span”）；
span.onclick=函数（事件）{
document.form.file.click（事件）；
};
var span=document.getElementById（“span”）；
span.onclick=函数（事件）{
document.form.file.click（事件）；
};

我在Chrome和FF中测试了这个，不是ie，但我希望这有帮助。
Chrome也给了我这个问题。我试图设置各种各样的CSS选择器，但似乎没有什么效果。然而，我确实通过使用FORM元素找到了一个解决方案

将输入命名为[type=file]元素
命名表单元素并将输入[type=file]放入其中
创建一个跨距，并将其放置在表单中输入的下方。这将是你的标签
使用CSS将输入的高度设置为0px，不透明度设置为0，这将使其不可见
使跨距绝对定位并向左0px

#文件{
高度：0px；
不透明度：0；
}  
#跨度{
左：0px；
位置：绝对位置；
光标：指针；
}
我的文件标签！！！！
var span=document.getElementById（“span”）；
span.onclick=函数（事件）{
document.form.file.click（事件）；
};
var span=document.getElementById（“span”）；
span.onclick=函数（事件）{
document.form.file.click（事件）；
};

我在Chrome和FF中测试了这个，不是ie，但我希望这有帮助。
jsfiddle
使用不同的浏览器…（说真的，我真的不会把标准表单控件的默认呈现搞得一团糟）。其中一些渲染是出于很好的原因进行的，我们现在遇到的很多web可用性问题都可以追溯到人们规避完美的默认行为。不过，如果工作需要这样做，您可能没有太多选择。请使用不同的浏览器…（说真的，我真的不会把标准表单控件的默认呈现搞得一团糟）。这里。其中一些渲染是出于很好的原因进行的，我们现在遇到的很多web可用性问题都可以追溯到人们规避完美的默认行为。不过，如果工作需要你这么做，你可能没有太多选择。谢谢。。这就是我要找的。谢谢。。这就是我要找的。
$(function () {
    $('#btn_myFileInput').data('default', $('label[for=btn_myFileInput]').text()).click(function () {
        $('#myFileInput').click()
    });
    $('#myFileInput').on('change', function () {
        var files = this.files;
        if (!files.length) {
            $('label[for=btn_myFileInput]').text($('#btn_myFileInput').data('default'));
            return;
        }
        $('label[for=btn_myFileInput]').empty();
        for (var i = 0, l = files.length; i < l; i++) {
            $('label[for=btn_myFileInput]').append(files[i].name + '\n');
        }
    });
});

<input type="file" id="myFileInput" name="html" style="width: 90px;" onchange="this.style.width = '100%';"/>

<style>
    #file {
        height:0px;
        opacity:0;
    }  
    #span {
        left:0px;
        position:absolute;
        cursor: pointer;
    }
</style>

<form name="form">
    <input type="file" id="file" name="file"/>
    <span id="span">My File label!!!!</span>
</form>

<script>
    var span = document.getElementById("span");

    span.onclick = function(event) {
        document.form.file.click(event);
    };

    var span = document.getElementById("span");
    span.onclick = function(event) {
        document.form.file.click(event);
    };
</script>