Как удалить всплывающую подсказку «Файл не выбран» из ввода файла в Chrome?

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

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

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

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

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

Hacky решение:

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

Скрипка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Все ответы здесь либо слишком усложнены, либо совершенно неверны.

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 и Firefox):

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

Это непростой вопрос. Мне не удалось найти способ выбрать элемент «файл не выбран», поэтому я создал маску, используя псевдоселектор: after.

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

::-webkit-file-upload-button

Попробуйте это: http://jsfiddle.net/J8Wfx/1/

К вашему сведению: это будет работать только в браузерах webkit.

PS, если кто-нибудь знает, как просматривать псевдоселекторы 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">

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

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

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

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

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

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

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

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

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

Меня устраивает!

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

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

Давай -webkit-appearance:. В любом случае стоит попробовать.

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

Надеюсь, это поможет :)

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

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

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

Удивительно, что никто не упомянул о event.preventDefault()

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

вы можете установить ширину для элемента 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')});
};

И поместите класс «неиспользуемый» на входные данные файла. Это просто и работает очень хорошо.

Лучшее решение для меня - обернуть input [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 я получаю что-то вроде: «Файл не выбран»).

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

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

Я знаю, что это своего рода хакерство, но все, что мне требовалось, - это установить прозрачный цвет в таблице стилей - встроенный будет выглядеть так: style = "color: transparent;".