bootstrap 4中的自定义输入文件不显示按钮答案

【问题标题】：custom input file in bootstrap 4 not show buttonbootstrap 4中的自定义输入文件不显示按钮
【发布时间】：2017-07-23 06:22:36
【问题描述】：

当我在引导程序 4 中使用自定义输入文件时，不要更改我的输入，也不要显示 browse 按钮。

file-browser

<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

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;

【问题讨论】：

根据 Bootstrap 的说法，它完全基于 CSS。您的 css 文件集成可能存在一些问题。你仔细检查了吗？
@masud_moni 是的，我破解了所有 css 命令和文件。
您是否为此元素使用了任何脚本代码？
@masud_moni 不，这个元素不需要脚本。

标签： html css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案1】：

据我检查 - 您需要插入 :before 和 :after 伪元素 - 然后它可以工作。

.custom-file-control:before{
  content: "Browse";
}
.custom-file-control:after{
  content: "Add files..";
}

http://codepen.io/powaznypowazny/pen/jBqzgR

【讨论】：

根据文档，这不是正确的方法。请参阅我的答案以获取更多信息。虽然这可能会使其正常工作，但它绕过了 Bootstrap 内置的一些功能。
您可以在下方查看my answer，以解决非英文页面和文件名捕获问题

【解决方案2】：

尝试使用以下代码。希望它能解决你的问题。它在 Bootstrap 页面的代码示例下方给出。

$custom-file-text: (
    placeholder: (
    en: "Choose file...",
    es: "Seleccionar archivo..."
    ),
    button-label: (
        en: "Browse",
        es: "Navegar"
    )
);

【讨论】：

@JavierFuentes 请查看引导文档。你会在那里找到它。我是在查看那份文件时发现的

【解决方案3】：

文档声明您应该设置文档的语言。例如，仅设置：

<html lang="en">

足以让它工作，除非像在@masud_moni 回答中那样，你已经指定了另一种语言，然后使用它而不是“en”。

【讨论】：

@IsmailFarooq，不是非英文页面的正确答案...我更喜欢下面的 rafa226 答案
这似乎对我使用版本 4.0.0-beta.2 没有帮助
如果您要使用自己国家/地区的值而不是“en”怎么办？那不行吗？虽然我的回答对于非英语页面可能不是“正确的”，但我建议您应该使用您自己的国家/地区值而不是 en。

【解决方案4】：

关于按钮，您可以在 .css 文件中指定语言，它会出现：

.custom-file-control:lang(fr)::before{
    content:"PARCOURIR";
}
.custom-file-control:lang(en)::before{
    content:"BROWSE";
}

【讨论】：

【解决方案5】：

要在 非英文页面 中显示自定义文件控件的占位符及其按钮标题，您必须在 CSS 中添加 .custom-file-control:before 和 .custom-file-control:empty::after，就像在这个 sn 中一样-p。

此时，选择后有open issue获取自定义控件内的文件名...您可以应用此处显示的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-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" 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>

【讨论】：

【解决方案6】：

我遇到同样的问题，来这里解决，没有找到它，所以我继续挖掘它：正确的方法是有一个类自定义文件的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>

【讨论】：