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

깡깡이

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

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

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

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

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

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

저에게는 텍스트가 보이지 않고 기본 브라우저 버튼을 계속 사용하기를 원했습니다.

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

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

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

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

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

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

아주 쉽습니다. input [ "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;
}

자바 스크립트 :

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

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

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

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

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

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

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

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

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

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

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

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

직접적으로 input [type = file]에 대해 많이 수정할 수 없습니다 .

입력 유형 파일을 opacity : 0으로 만들고 사용자 정의 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
 });

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

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

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

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

그리고 파일 입력에 "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()">    

나는 그것이 약간의 해킹이라는 것을 알고 있지만, 내가 필요한 것은 스타일 시트에서 색상을 투명하게 설정하는 것 뿐이었다. 인라인은이 style = "color : transparent;"처럼 보일 것이다.