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