twitter-bootstrap bootstrap 4 中的自定义输入文件不显示按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42573833/
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
custom input file in bootstrap 4 not show button
提问by Soheil Alizadeh
When I use Custom input file in bootstrap 4, don't change my input and don't show browsebutton.
当我在 bootstrap 4 中使用自定义输入文件时，不要更改我的输入，也不要显示browse按钮。
<label class="custom-file">
<input type="file" id="Image" class="custom-file-input">
<span class="custom-file-control"></span>
</label>
.custom-file
.自定义文件
position: relative;
display: inline-block;
max-width: 100%;
height: 2.5rem;
cursor: pointer;
.custom-file-input
.自定义文件输入
min-width: 14rem;
max-width: 100%;
margin: 0;
filter: alpha(opacity=0);
opacity: 0;
.custom-file-control
.custom-file-control
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
user-select: none;
background-color: #fff;
border: 1px solid #ddd;
border-radius: .25rem;
回答by Stuart
The documentation states that you should set the language of the document. For example, setting just:
该文档指出您应该设置文档的语言。例如，只设置：
<html lang="en">
was enough to get it working, unless like in @masud_moni answer, you have specified another language then use that instead of "en".
足以让它工作，除非像@masud_moni 的回答一样，你指定了另一种语言，然后使用它而不是“en”。
回答by Kuba Wojtach
As far as i've checked - you need to insert the :before and :after pseudoelements - then it works.
据我检查 - 你需要插入 :before 和 :after 伪元素 - 然后它就可以工作了。
.custom-file-control:before{
content: "Browse";
}
.custom-file-control:after{
content: "Add files..";
}
回答by masud_moni
Try using the following code. Hope it is gonna fix your problem. It is given just under the code example in the Bootstrap page.
尝试使用以下代码。希望它能解决你的问题。它在 Bootstrap 页面的代码示例下给出。
$custom-file-text: (
placeholder: (
en: "Choose file...",
es: "Seleccionar archivo..."
),
button-label: (
en: "Browse",
es: "Navegar"
)
);
回答by rafa226
Concerning the button, you can specify the language in your .css file and it will appear :
关于按钮，您可以在 .css 文件中指定语言，它会出现：
.custom-file-control:lang(fr)::before{
content:"PARCOURIR";
}
.custom-file-control:lang(en)::before{
content:"BROWSE";
}
回答by JavierFuentes
To show custom-file-control's placeholder and its button captionin non english pagesyou must add to your CSS .custom-file-control:beforeand .custom-file-control:empty::afteras in this snippet.
要在非英文页面中显示自定义文件控件的占位符及其按钮标题，您必须添加到您的 CSS 中.custom-file-control:before，.custom-file-control:empty::after如本代码段所示。
At this moment, there open issueto get the filename inside the custom control after selection... you can apply the onchangeevent workaround showed here.
此时，在选择后获取自定义控件内的文件名存在未解决的问题...您可以应用onchange此处显示的事件解决方法。
/* Valid for any language */
.custom-file-control:before {
content: "Search";
}
.custom-file-control:empty::after {
content: "Choose a file...";
}
/* Specific for spanish language */
.custom-file-control:lang(es)::before {
content : "Buscar";
}
.custom-file-control:lang(es):empty::after {
content : "Seleccionar un fichero...";
}<!DOCTYPE html>
<html lang="es-es">
<head>
<title>Test custom-file-control</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphRtheitroadBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="mt-5 ml-5">
<label class="custom-file">
<input type="file" id="file" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\').slice(-1)[0])" required>
<span class="custom-file-control"></span>
</label>
</div>
</body>
</html>回答by Adrian B
I hit the same problem, came here for solution, did not find it, so I continued to dig for it: the right way to do it is to have a div of class custom-file and the input and label inside it, not the input inside the label.
我遇到了同样的问题，来到这里寻求解决方案，没有找到，所以我继续挖掘它：正确的方法是有一个类自定义文件的 div 和其中的输入和标签，而不是在标签内输入。
<div class="custom-file">
<input type="file" id="Image" class="custom-file-input">
<label class="custom-file" for="Image">Select file to upload</label>
</div>
