Chromeのファイル入力から「ファイルが選択されていません」ツールチップを削除するにはどうすればよいですか？
Googleのファイル入力から「ファイルが選択されていません」ツールチップを削除したいChrome（Firefoxではツールチップが表示されないことがわかります）。
入力フィールド内のテキストではなく、入力の上にマウスを移動したときに表示されるツールチップについて話していることに注意してください。
私は運なしでこれを試しました：
$('#myFileInput').attr('title', '');
これはwebkitブラウザのネイティブ部分であり、削除することはできません。ファイル入力をcoveringまたはhidingなどのハッキングソリューションについて考える必要があります。
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, ''))
})
私にとっては、テキストを非表示にしてネイティブブラウザボタンを使用したかっただけです。
input[type='file'] {
color: transparent;
}
未定義の提案はすべて好きですが、別のユースケースがありました。これが同じ状況の誰かに役立つことを願っています。
デフォルトのツールチップは、title属性を使用して編集できます
<input type='file' title="your text" />
ただし、このツールチップを削除しようとすると
<input type='file' title=""/>
これは動作しません。これを機能させるためのちょっとしたコツです。タイトルをスペースで試してみてください。それが動作します。：）
<input type='file' title=" "/>
ChromeなどのWebkitブラウザーではスペースを使用し、FirefoxではIE（Chrome 35、FF 29 、IE 11、サファリモバイル）
$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');
私は非常に簡単な解決策を見つけました。タイトル属性に空の文字列を設定するだけです。
<input type="file" value="" title=" " />
非常に簡単で、CSSがinput ["type"]をターゲットにしていることを忘れてしまいました。私にとってはうまくいきません。理由はわかりません。 HTMLタグでソリューションを取得しました
<input type="file" style="color:transparent; width:70px;"/>
問題の終わり
これは私のために動作します（少なくともChromeおよびFirefoxで）：
<input type="file" accept="image/*" title=" "/>
すべてのブラウザーでシンプル。これは私のためにそれをしました
$(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');
});
私はこのフィドルを最も単純な方法で作成しました。 [ファイルの選択]ボタンをクリックすると、ファイル選択メニューが表示されます。その後、任意の方法でボタンをスタイル設定できます。基本的に、あなたがする必要があるのは、ファイル入力を非表示にし、別のボタンをクリックしたときに合成クリックをトリガーすることだけです。これをIE 9、FF、Chromeでスポットテストしましたが、すべて正常に動作します。
これはトリッキーなものです。 「ファイルが選択されていません」要素を選択する方法が見つからなかったため、：after擬似セレクターを使用してマスクを作成しました。
私のソリューションでは、次の疑似セレクターを使用してボタンのスタイルを設定する必要もあります。
::-webkit-file-upload-button
これを試してください： http://jsfiddle.net/J8Wfx/1/
参考：これはWebkitブラウザでのみ機能します。
P.S Webkitインスペクターで上記のようなwebkit擬似セレクターを表示する方法を知っている人がいれば教えてください
これを実現するには、コントロールをかなりカスタマイズする必要があります。
次のガイドに従ってください： 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>event.preventDefault()について誰も言及していないことに驚いた
$("input[type=file]").mouseover(function(event) {
event.preventDefault();
// This will disable the default behavior of browser
});
不要なjavascriptの使用は避けたほうがよいでしょう。ラベルタグを利用して、入力のクリックターゲットを次のように展開できます。
<label>
<input type="file" style="display: none;">
<a>Open</a>
</label>
入力が非表示になっている場合でも、リンクはクリックターゲットとして機能し、必要に応じてスタイルを設定できます。
-webkit-appearance:を試してください。とにかく試してみる価値があります。
http://css-infos.net/property/-webkit-appearance
それが役立つことを願っています:)
直接input [type = file]についてあまり変更することはできません。
入力タイプファイルをopacity：0にして、カスタムCSSを使用して相対要素[div/span/button]をその上に配置してみます
これを試してください http://jsfiddle.net/gajjuthechamp/pvyVZ/8/
不透明度をゼロに設定しても、ツールチップが表示されます。要素でvisibility:hiddenを試してください。それは私のために働いています。
私にとって最良の解決策は、入力[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>上記の提案のいくつかをjQueryを使用して組み合わせて、ここで私がやったことがあります。
input[type='file'].unused {
color: transparent;
}
そして：
$(function() {
$("input[type='file'].unused").click( function() {$(this).removeClass('unused')});
};
そして、ファイル入力にクラスを「未使用」にします。これは簡単で、かなりうまく機能します。
「ファイルが選択されていません」とそのテキストの後に追加された余分なスペースを完全に削除するハッキングソリューションを思い付きました（Chromeで「ファイルが選択されていません」のようになります）。
これはページの配置を完全に台無しにしていたので、解決策を見つけるためにそれと本当に戦いました。 inputタグのstyle属性内で、「width」をボタンの幅に設定すると、末尾のテキストとスペースが削除されます。ボタンの幅はすべてのブラウザで同じではないため（たとえば、Firefoxでは少し小さくなります）、スタイルの色をページの背景と同じ色に設定することもできます（そうでない場合は、 "いいえ」が表示される場合があります）。入力ファイルのタグは次のようになります。
<input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()">
私はこれに対する良い答えを探します...そして私はこれを見つけました：
最初に「ファイルが選択されていません」を削除します
input[type="file"]{
font-size: 0px;
}
次に、ボタンを-webkit-file-upload-buttonで次のように操作します。
input[type="file"]::-webkit-file-input-button{
font-size: 16px; /*normal size*/
}
これがあなたが探していたものであることを願って、それは私のために働く。
わたしにはできる！
input[type="file"]{
font-size: 0px;
}
次に、width、heightなどの異なる種類のスタイル、または他のプロパティを使用して、独自の入力ファイルを作成できます。
ボタンのみを表示し、「ファイルが選択されていません」を非表示にする要素の幅を設定できます。