Как удалить подсказку "нет выбранного файла" из файла, введенного в Chrome?

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

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

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

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

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

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

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

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

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

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

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

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

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

::-webkit-file-upload-button

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

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

P. S Если кто-нибудь знает, как просматривать 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 и Firefox):

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

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

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

конец задачи

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

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

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

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

дать -webkit-appearance: идти. Все равно стоит попробовать.

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

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

напрямую вы не можете изменить о input[type=file].

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

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

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

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

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

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

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

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

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

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

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

Сначала удалите 'no file chosen'

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 я получаю что-то вроде: "Файл не выбран ").

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

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

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

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

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

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

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