Chromeのファイル入力から「ファイルが選択されていません」ツールチップを削除するにはどうすればよいですか？

Google Chromeのファイル入力から「ファイルが選択されていません」ツールチップを削除したいのですが（Firefoxにツールチップが表示されないようです）。

入力フィールド内のテキストではなく、マウスを入力の上に移動したときに表示されるツールチップについて話していることに注意してください。

私は運がなくてこれを試しました：

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

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

フィドル

デフォルトのツールチップは、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=" " />

ChromeなどのWebkitブラウザーではスペースを使用し、FirefoxまたはIEでは空の文字列を使用してタイトルを設定するツールチップを無効にできます（Chrome 35、FF 29、IE 11、Safariモバイルでテスト済み）

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

非常に簡単です。入力["type"]を対象とするCSSを忘れてください。私には機能しません。理由はわかりません。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誰かがウェブキットインスペクターで上記のようなウェブキット疑似セレクターを表示する方法を知っているなら、私に知らせてください

すべてのブラウザでシンプルです。これは私のためにそれをしました

$(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>
  <input type="file" style="display: none;">
  <a>Open</a>
</label>

入力が非表示になっている場合でも、リンクはクリックターゲットとして機能し、必要に応じてスタイルを設定できます。

不透明度をゼロに設定しても、ツールチップが表示されます。visibility:hidden要素を試してみてください。それは私のために働いています。

やっ-webkit-appearance:てみてください。とにかく試してみる価値があります。

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

お役に立てば幸いです:)

input [type = file]について直接変更することはできません。

入力タイプファイルを不透明にし、カスタムCSSを使用して相対要素[div / span / button]をその上に配置してみます

これを試してください http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

わたしにはできる！

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
 });

ボタンのみを表示し、「ファイルが選択されていません」を非表示にする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;"のようになります。