如何从 Chrome 中的文件输入中删除“未选择文件”工具提示

可以使用 title 属性编辑默认工具提示

<input type='file' title="your text" />

但是，如果您尝试删除此工具提示

<input type='file' title=""/>

这是行不通的。这是我的小技巧，尝试用空格标题。它会起作用.:)

<input type='file' title=" "/>

对我来说，我只是希望文本不可见并且仍然使用本机浏览器按钮。

input[type='file'] {
  color: transparent;
}

我喜欢undefined的所有建议，但我有不同的用例，希望这对处于相同情况的人有所帮助。

这是 webkit 浏览器的原生部分，您无法将其删除。您应该考虑一个黑客解决方案，例如覆盖或隐藏文件输入。

一个黑客解决方案：

input[type='file'] {
  opacity:0    
}

<div>
    <input type='file'/>
    <span id='val'></span>
    <span id='button'>Select File</span>
</div>   

$('#button').click(function(){
   $("input[type='file']").trigger('click');
})
$("input[type='file']").change(function(){
   $('#val').text(this.value.replace(/C:''fakepath''/i, ''))
})    

小提琴

很简单，忘记CSS针对输入["类型"]的东西，它对我不起作用。我不知道为什么。我在 HTML 标记中得到了我的解决方案

<input type="file" style="color:transparent; width:70px;"/>

问题的结束

我找到了一个非常简单的解决方案，只需在 title 属性中设置一个空字符串即可。

<input type="file" value="" title=" " />

您可以禁用工具提示，在Chrome等webkit浏览器上设置带有空格的标题，在Firefox或IE上设置空字符串(在Chrome 35，FF 29，IE 11，safari Mobile上测试(

$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');

这个对我有用(至少在 Chrome 和 Firefox 中(：

<input type="file" accept="image/*" title="&nbsp;"/>

这是一个棘手的问题。我找不到选择"未选择文件"元素的方法，所以我使用 ：after 伪选择器创建了一个掩码。

我的解决方案还需要使用以下伪选择器来设置按钮样式：

::-webkit-file-upload-button

试试这个： http://jsfiddle.net/J8Wfx/1/

仅供参考：这仅适用于网络套件浏览器。

附言如果有人知道如何在webkit检查器中查看像上面这样的webkit伪选择器，请告诉我

在所有浏览器上都很简单。 这为我做到了

$(function () {
     $('input[type="file"]').change(function () {
          if ($(this).val() != "") {
                 $(this).css('color', '#333');
          }else{
                 $(this).css('color', 'transparent');
          }
     });
})

input[type="file"]{
    color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="app_cvupload" class="fullwidth input rqd">

这里所有的答案都过于复杂，或者完全错误。

.html：

<div>
    <input type="file" />
    <button>Select File</button>
</div>

.css：

input {
    display: none;
}

JavaScript：

$('button').on('click', function(){
   $('input').trigger('click'); 
});

http://jsfiddle.net/odfe34n8/

我以最简单的方式创造了这个小提琴。点击 选择文件 按钮将弹出文件选择菜单。然后，您可以按照所需的任何方式设置按钮的样式。基本上，您需要做的就是隐藏文件输入，并在单击另一个按钮时触发合成单击。我在IE 9，FF和Chrome上对此进行了现场测试，它们都工作正常。

换行并使其不可见。在Chrome，Safari和FF工作。

label { 
  padding: 5px;
  background: silver;
}
label > input[type=file] {
    display: none;
}

<label>
  <input type="file">
  select file
</label>

这一点，您需要对控件进行大量自定义。

请按照以下指南进行操作： http://www.quirksmode.org/dom/inputfile.html

即使将不透明度设置为零，也会显示工具提示。尝试visibility:hidden元素。它正在为我工作。

它对我有用！

input[type="file"]{
  font-size: 0px;
}

然后，您可以使用不同类型的样式，例如width，height或其他属性来创建自己的输入文件。

最好避免使用不必要的 JavaScript。您可以利用标签标签来扩展输入的点击目标，如下所示：

<label>
  <input type="file" style="display: none;">
  <a>Open</a>
</label>

即使输入是隐藏的，该链接仍然可以用作它的点击目标，您可以根据需要设置其样式。

惊讶地发现没有人提到event.preventDefault()

$("input[type=file]").mouseover(function(event) {
    event.preventDefault();
    // This will disable the default behavior of browser
 });

试一试-webkit-appearance:。无论如何值得一试。

http://css-infos.net/property/-webkit-appearance

希望对:)有所帮助

直接你不能修改太多关于input[type=file]的信息。

使输入类型文件不透明度：0并尝试使用自定义 CSS 在其上放置一个相对元素 [div/span/button]

试试这个http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

style="color: transparent; width:110px"

这个解决方案对我有用，如下所示：

<input class="ml-4"
       type="file"
       style="color: transparent; width:110px"
       ng2FileSelect
       [uploader]="uploader"
       multiple />

为yor元素设置宽度，该元素将仅显示按钮并隐藏"未选择文件"。

我为此寻找好的答案...我发现这个：

首先删除"未选择文件">

input[type="file"]{
font-size: 0px;
}

然后用-webkit-file-upload-button操作按钮，这样：

input[type="file"]::-webkit-file-input-button{
font-size: 16px; /*normal size*/
}

希望这就是你要找的，它对我有用。

结合上面的一些建议，使用 jQuery，这是我所做的：

input[type='file'].unused {
  color: transparent;
}

和：

$(function() {
  $("input[type='file'].unused").click( function() {$(this).removeClass('unused')});
};

并将类"未使用"放在文件输入上。 这很简单，效果很好。

对我来说，最好的解决方案是将输入 [type="file"] 包装在包装器中，并添加一些 jquery 代码：

$(function(){
	function readURL(input){
        if (input.files && input.files[0]){
            var reader = new FileReader();
            
            reader.onload = function (e){
                $('#uploadImage').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#image").change(function(){
        readURL(this);
    });
});

#image{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 75px;
	height: 35px;
}
#uploadImage{
	position: relative;
	top: 30px;
	left: 70px;
}
.button{
	position: relative;
	width: 75px;
	height: 35px;
	border: 1px solid #000;
	border-radius: 5px;
	font-size: 1.5em;
	text-align: center;
	line-height: 34px;
}

<form action="#" method="post" id="form" >
	<div class="button">
		Upload<input type="file" id="image" />
     </div>
     <img id="uploadImage" src="#" alt="your image" width="350" height="300" />
 </form>

出了一个笨拙的解决方案，可以完全删除"未选择文件"以及该文本后添加的额外空格(在Chrome中，我得到类似以下内容："未选择任何文件"(。

这完全搞砸了我的页面对齐方式，所以我真的努力寻找解决方案。在输入标签的 style 属性中，将"width"设置为按钮的宽度将消除尾随文本和空格。由于按钮的宽度在所有浏览器中都不相同(例如，在 Firefox 中它略小(，您还需要将样式的颜色设置为与页面背景相同的颜色(否则可能会出现杂散的"否"(。我的输入文件标签如下所示：

<input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()">    

这有点麻烦，但我所需要的只是在样式表中将颜色设置为透明 - 内联看起来像这个style="color：transparent;"。

隐藏工具提示的最佳选择是组合以下属性：

1. 在输入上：color:white;(如果背景是白色以遮蔽文本的颜色，如果是另一种颜色，则使用该颜色(。

2. 如果输入旁边有任何其他元素，请使用position: absolute;将元素放置在工具提示上方*(注意保持按钮可见，仅隐藏工具提示(

对于任何 3 顶部不起作用的人：

创建输入元素：

<input type='file' name='file' id='file' />

将输入元素的样式设置为输入元素的 Id 到它看起来不存在的位置：

#file{ color: #ffffff; width: 0px; }

然后在原始输入的前面创建一个新按钮，使用 OnClick 函数运行单击原始输入的 JavaScript：

<button onclick='clicker()'>BROWSE</button><input type='file' name='file' id='file' /> 
// can see the new button but not the original input:

Javascript：

function clicker(){ document.getElementById('file').click(); }

结果：

function clicker(){
document.getElementById('file').click();
}

#file{
  color: #ffffff;
  width: 0px;
}

<html>
<head>
</head>
<body>
FILE: <button onclick='clicker()'>BROWSE</button><input type='file' id='file'/>
<br>
</body>
</html>

忘记删除工具提示。将文件输入的容量设置为零，在其上方放置一个绝对位置的div 框，因此每当您单击div 时，文件输入都会提示。

<div class="file_cover">Click to upload file</div>
<input type="file">

input[type='file'] {
  opacity: 0;
}
.file_cover {
  position: absolute;
  top: 0;
}

我为此找到了一个完美的解决方案

您只需添加一个标签并将其链接到输入元素

<label for="image__input">Choose a file</label>
<input type="file" id="image__input"/>

输入元素的功能也将自动应用于标签

然后按如下方式显示输入元素以将其删除

input[type='file'] {
   display: none;
}

之后，您可以根据需要设置标签样式