Html 如何更改输入文件浏览按钮的文本和颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12578749/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How change text and color of button Browse of input file?
提问by mum
I design a input file as:
我将输入文件设计为：
<input type="file" name="file" id="file" size="52" />
I want to change text and color of button "Browse..". Can you help me? thanks all.
我想更改“浏览...”按钮的文本和颜色。你能帮助我吗？谢谢大家。
回答by Mangala Edirisinghe
Appearance and functionality is ok, but this is not your real expected one. think this is help to you.
外观和功能还可以，但这不是您真正期望的。认为这对你有帮助。
<input type="text" id="fileName" readonly="readonly" >
<div class="file_input_div" style="display: inline;">
<input type="button" id="button" value="Open"/>
<input type="file" style="opacity:0; position:relative; left:-40px;" onchange="javascript: document.getElementById ('fileName') . value = this.value"/>
</div>
CSS
CSS
?#button{
position: relative;
left:-1px;
background-color:#446655;
}?
回答by Praveen Kumar Purushothaman
It is very much browser architecture and OS dependent feature, and it cannot be changed.
它是非常依赖于浏览器架构和操作系统的特性，并且无法更改。
Using an overlay
使用叠加
But you can overlay other elements on top of this and hide the default look. You can also use some plugins, which do this for you.
但是您可以在此之上覆盖其他元素并隐藏默认外观。您还可以使用一些插件，它们会为您执行此操作。
jQuery File Uploadis one such plugin capable of doing it.
jQuery File Upload就是一种能够做到这一点的插件。
回答by Devendra Singraul
Please try this : https://codepen.io/claviska/pen/vAgmd
请试试这个：https: //codepen.io/claviska/pen/vAgmd
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-primary">
Browse… <input type="file" style="display: none;" multiple>
</span>
</label>
<input type="text" class="form-control" readonly>
</div>
$(function() {
$(document).on('change', ':file', function() {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
// We can watch for our custom `fileselect` event like this
$(document).ready( function() {
$(':file').on('fileselect', function(event, numFiles, label) {
var input = $(this).parents('.input-group').find(':text'),
log = numFiles > 1 ? numFiles + ' files selected' : label;
if( input.length ) {
input.val(log);
} else {
if( log ) alert(log);
}
});
});
});
回答by Mukul Goel
it is browser architecture dependent. you cant do much about it.
它依赖于浏览器架构。你对此无能为力。
still there are already some discussions about this on stackoverflow
在stackoverflow上仍然有一些关于这个的讨论
you should check this out
你应该看看这个
Visit How to change the button text of <input type="file" />?
访问如何更改 <input type="file" /> 的按钮文本？
Hope this helps
希望这可以帮助
PS: From next time make sure you are not posting a duplicate question
PS：从下次开始，请确保您不会发布重复的问题
回答by Bang Dao
You can found it here:
http://www.quirksmode.org/dom/inputfile.html
The post is too long to be copied here.
你可以在这里找到它：
http: //www.quirksmode.org/dom/inputfile.html
帖子太长，无法复制到这里。
Basically, you will stylist an input[type=text](which is user will see), and put an input[type=file] opacity = 0on top of the input[type=text].
基本上，您将设计一个input[type=text]（用户将看到的），并input[type=file] opacity = 0在input[type=text].
Hope this can help.
希望这能有所帮助。
For webkit browser only, you can use CSSattribute -webkit-appearanceto clear default style and start to stylist it from the beginning.
仅对于 webkit 浏览器，您可以使用CSS属性-webkit-appearance清除默认样式并从头开始设计样式。
