Chrome의 파일 입력에서 "선택된 파일 없음"툴팁을 제거하려면 어떻게해야합니까?

Chrome의 파일 입력에서 "선택된 파일 없음"툴팁을 제거하려면 어떻게해야합니까?

---

Google 크롬의 파일 입력에서 "선택한 파일 없음"툴팁을 제거하고 싶습니다 (Firefox에 툴팁이 표시되지 않음).

입력 필드 내부의 텍스트가 아니라 입력 위로 마우스를 이동할 때 나타나는 툴팁에 대해 이야기하고 있습니다.

나는 운없이 이것을 시도했다.

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

---

이것은 웹킷 브라우저 의 기본 부분이며 제거 할 수 없습니다. 당신은 같은 해키 솔루션에 대해 생각해야 커버 또는 숨기기 파일 입력을.

해키 솔루션 :

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

나는 undefined의 모든 제안을 좋아하지만 다른 사용 사례가 있었으므로 동일한 상황에있는 누군가에게 도움이되기를 바랍니다.

---

제목 속성을 사용하여 기본 툴팁을 편집 할 수 있습니다.

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

하지만이 툴팁을 제거하려고하면

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

이것은 작동하지 않습니다. 이 작업을 수행하는 작은 트릭은 다음과 같습니다. 공백으로 제목을 시도하십시오. 작동합니다. :)

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

---

Chrome과 같은 웹킷 브라우저에 공백이있는 제목과 Firefox 또는 IE (Chrome 35, FF 29, IE 11, safari 모바일에서 테스트 됨)에서 빈 문자열로 제목을 설정하는 도구 설명을 비활성화 할 수 있습니다.

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

---

매우 쉬운 해결책을 찾았습니다. 제목 속성에 빈 문자열을 설정하기 만하면됩니다.

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

---

이것은 나를 위해 작동합니다 (적어도 Chrome 및 Firefox에서).

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

---

아주 쉽습니다. input [ "type"]을 대상으로하는 CSS는 잊어 버리세요. 저에게는 작동하지 않습니다. 이유를 모르겠습니다. 내 HTML 태그에 내 솔루션이 있습니다.

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

문제의 끝

---

이것은 까다로운 것입니다. '선택된 파일 없음'요소를 선택하는 방법을 찾을 수 없어서 : after 의사 선택기를 사용하여 마스크를 만들었습니다.

내 솔루션에는 버튼 스타일을 지정하기 위해 다음 의사 선택기를 사용해야합니다.

::-webkit-file-upload-button

이것을보십시오 : http://jsfiddle.net/J8Wfx/1/

참고 : 이것은 웹킷 브라우저에서만 작동합니다.

추신 웹킷 검사기에서 위와 같은 웹킷 의사 선택기를 보는 방법을 아는 사람이 있으면 알려주십시오.

---

여기에있는 모든 대답은 완전히 지나치게 복잡하거나 그렇지 않으면 완전히 잘못되었습니다.

html :

<div>
    <input type="file" />
    <button>Select File</button>
</div>

css :

input {
    display: none;
}

자바 스크립트 :

$('button').on('click', function(){
   $('input').trigger('click'); 
});

http://jsfiddle.net/odfe34n8/

저는이 바이올린을 가장 단순한 방식으로 만들었습니다. 파일 선택 버튼을 클릭하면 파일 선택 메뉴가 나타납니다. 그런 다음 원하는 방식으로 버튼을 스타일화할 수 있습니다. 기본적으로 파일 입력을 숨기고 다른 버튼을 클릭 할 때 합성 클릭을 트리거하기 만하면됩니다. IE 9, FF 및 Chrome에서 이것을 테스트했으며 모두 잘 작동합니다.

---

이를 위해서는 컨트롤을 상당히 많이 사용자 정의해야합니다.

http://www.quirksmode.org/dom/inputfile.html 에서 가이드를 따르십시오 .

---

모든 브라우저에서 간단합니다. 이것은 나를 위해 그것을했다

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

---

감싸고 보이지 않게 만드십시오. Chrome, Safari 및 FF에서 작업하세요.

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

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

---

부여 -webkit-appearance:가가. 어쨌든 시도할만한 가치가 있습니다.

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

도움이되기를 바랍니다 :)

---

직접 입력 [type = file]에 대해 많은 것을 수정할 수 없습니다 .

입력 유형 파일을 opacity : 0으로 만들고 사용자 정의 CSS를 사용하여 그 위에 상대 요소 [div / span / button]를 배치합니다.

이것을 시도하십시오 http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

---

불필요한 자바 스크립트를 사용하지 않는 것이 좋습니다. 레이블 태그를 활용하여 다음과 같이 입력의 클릭 대상을 확장 할 수 있습니다.

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

입력이 숨겨져 있어도 링크는 여전히 클릭 대상으로 작동하며 원하는대로 스타일을 지정할 수 있습니다.

---

불투명도를 0으로 설정해도 툴팁이 나타납니다. visibility:hidden요소를 사용해보십시오 . 그것은 나를 위해 일하고 있습니다.

---

아무도 언급하지 않은 것을보고 놀라움 event.preventDefault()

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

---

버튼 만 표시하고 "선택한 파일 없음"을 숨기는 요소의 너비를 설정할 수 있습니다.

---

나는 이것에 대한 좋은 대답을 찾고 ... 그리고 이것을 찾았습니다.

먼저 '선택한 파일 없음'을 삭제하십시오.

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

then work the button with the -webkit-file-upload-button, this way:

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

hope this is what you were looking for, it works for me.

---

Combining some of the suggestions above, using jQuery, here is what I did:

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

And:

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

And put the class "unused" on your file inputs. This is simple and works pretty well.

---

The best solution, for me, is to wrap input [type="file"] in a wrapper, and add some jquery code:

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

---

I came up with a hacky solution that totally removes "No file chosen" plus the extra space that is added after that text (in Chrome I get something like: "No file chosen ").

This was totally messing up my page alignment, so I really fought with it to find a solution. Inside the input tag's style attribute, setting "width" to the width of the button will eliminate the trailing text and spaces. Since the width of the button is not the same in all browsers (it's a little smaller in Firefox, for example), you'll also want to set the style's color to the same color as the background of the page (otherwise a stray "No" may show through). My input file tag looks like this:

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

---

It works for me!

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

Then, you can use different kind of styles such as width, height or other properties in order to create your own input file.

참고URL : https://stackoverflow.com/questions/12035400/how-can-i-remove-the-no-file-chosen-tooltip-from-a-file-input-in-chrome