Как я могу удалить всплывающую подсказку "Нет файла" из ввода файла в Chrome?

Я хотел бы удалить всплывающую подсказку "Нет файлов" из ввода файла в Google Chrome (я вижу, что всплывающая подсказка не отображается в Firefox).

Обратите внимание, что я говорю не о тексте внутри поля ввода, а о всплывающей подсказке, которая появляется при перемещении мыши над входом.

Я пробовал это без везения:

$('#myFileInput').attr('title', '');

Ответы

Ответ 1

Это родная часть веб-браузеров, и вы не можете ее удалить. Вы должны думать о хакерских решениях, таких как покрытие или скрытие входных файлов.

Хакерное решение:

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, ''))
})

Fiddle

Ответ 2

Для меня я просто хотел, чтобы текст был невидимым и по-прежнему использовал собственную кнопку браузера.

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

Мне нравятся все предложения undefined, но у меня был другой вариант использования, надеюсь, что это поможет кому-то в той же ситуации.

Ответ 3

всплывающая подсказка по умолчанию может быть отредактирована с помощью атрибута title

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

Но если вы попытаетесь удалить эту подсказку

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

Это не работает. Вот мой маленький трюк, чтобы работать над этим, попробуйте название с пробелом. Он будет работать.:)

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

Ответ 4

Вы можете отключить всплывающую подсказку, устанавливая заголовок с пространством в браузерах веб-китов, таких как Chrome, и пустую строку в Firefox или IE (проверено на мобильных устройствах Chrome 35, FF 29, IE 11, сафари)

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

Ответ 5

Я нашел решение, которое очень легко, просто установите пустую строку в атрибут заголовка.

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

Ответ 6

Этот работает для меня (по крайней мере, в Chrome и Firefox):

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

Ответ 7

Очень просто, забудьте CSS, ориентируясь на ввод [ "type" ], это не работает для меня. Я не знаю почему. Я получил свое решение в своем теге HTML

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

Конец проблемы

Ответ 8

Это сложно. Я не мог найти способ выбрать элемент "no file selected", поэтому создал маску с помощью: после псевдоселектора.

Мое решение также требует использования следующего псевдоселектора для стилизации кнопки:

::-webkit-file-upload-button

Попробуйте следующее: http://jsfiddle.net/J8Wfx/1/

FYI: Это будет работать только в браузерах webkit.

P.S, если кто-нибудь знает, как просматривать псевдо-селеры webkit, такие как выше, в инспекторе webkit, пожалуйста, дайте мне знать

Ответ 9

Все ответы здесь полностью сложны, или иначе просто совершенно неправильно.

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, и все они работают нормально.

Ответ 10

Вам нужно будет настроить элемент управления для достижения этого.

Пожалуйста, следуйте инструкциям: http://www.quirksmode.org/dom/inputfile.html

Ответ 11

Во всех браузерах и просто. это сделало это для меня

$(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">

Ответ 12

Оберните и сделайте невидимым. Работа в Chrome, Safari && FF.

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

Ответ 14

Непосредственно вы не можете многое изменить для ввода [type = file].

Сделайте непрозрачность файла типа ввода: 0 и попробуйте поместить относительный элемент [div/span/button] поверх него с помощью специального CSS

Попробуйте это http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

Ответ 15

Лучше избегать использования ненужного javascript. Вы можете воспользоваться тегом меток, чтобы развернуть цель щелчка ввода так:

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

Несмотря на то, что ввод скрыт, ссылка по-прежнему работает как цель клика для него, и вы можете стилизовать его, как хотите.

Ответ 16

Даже если вы установите непрозрачность на ноль, появится всплывающая подсказка. Попробуйте visibility:hidden на элементе. Это работает для меня.

Ответ 17

Сюрприз, чтобы никто не упомянул про event.preventDefault()

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

Ответ 18

вы можете установить ширину для элемента yor, который отобразит только кнопку и скроет "no file selected".

Ответ 19

Я ищу хороший ответ для этого... и я нашел это:

Сначала удалите "no file selected" 

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

затем запустите кнопку с -webkit-file-upload-button, следующим образом:

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

надеюсь, что это то, что вы искали, оно работает для меня.

Ответ 20

Объединив некоторые из приведенных выше предложений, используя jQuery, вот что я сделал:

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

и

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

И поместите класс "unused" в ваши файлы. Это просто и работает очень хорошо.

Ответ 21

Лучшим решением для меня является перенос ввода [ 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>

Ответ 22

Я придумал хакерское решение, которое полностью удаляет "No file selected" плюс дополнительное пространство, которое добавляется после этого текста (в Chrome я получаю что-то вроде: "Файл не выбран" ).

Это полностью перепутало мое выравнивание страницы, поэтому я действительно сражался с ним, чтобы найти решение. Внутри атрибута стиля входного тега установка ширины в ширину кнопки приведет к удалению завершающего текста и пробелов. Так как ширина кнопки не одинакова во всех браузерах (например, она немного меньше в Firefox), вы также хотите установить цвет стиля того же цвета, что и фон страницы (в противном случае - Нет "может показаться). Мой тег входного файла выглядит следующим образом:

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

Ответ 23

Это работает для меня!

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

Затем вы можете использовать различные стили, такие как width, height или другие свойства, чтобы создать свой собственный входной файл.