Chrome의 파일 입력에서 "No file choosed" 툴팁을 제거하려면 어떻게 해야 합니까?

Chrome의 파일 입력에서 "No file choosed" 툴팁을 제거하려면 어떻게 해야 합니까?

Google Chrome의 파일 입력에서 "No file choosed" 툴팁을 제거하고 싶습니다(Firefox에는 툴팁이 표시되지 않습니다).

입력 필드 안의 텍스트가 아니라 입력 위로 마우스를 이동하면 나타나는 툴팁을 말하는 것임을 유의하시기 바랍니다.

나는 운이 없게도 이것을 시도해 보았습니다.

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

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

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

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

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

이거 안 돼요.여기 이 작업을 수행하는 작은 방법이 있습니다. 공백이 있는 제목을 사용해 보십시오.그건 작동할 것이다.:)

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

저는 텍스트가 보이지 않고 네이티브 브라우저 버튼을 사용하기를 원했을 뿐입니다.

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

나는 정의되지 않은 모든 제안을 좋아하지만 다른 사용 사례가 있었습니다. 이것이 같은 상황에 있는 누군가에게 도움이 되었으면 합니다.

이것은 웹킷 브라우저의 기본 부분이므로 제거할 수 없습니다.당신은 파일 입력을 덮거나 숨기는 것과 같은 해킹 솔루션에 대해 생각해야 합니다.

해킹 솔루션:

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

피들

아주 쉬워요, 입력["type"]을 목표로 하는 CSS는 잊어버려요, 저에게는 통하지 않아요.왜인지 모르겠다.HTML 태그에 솔루션을 넣었습니다.

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

문제의 끝

제목 속성에 빈 문자열을 설정하면 아주 쉬운 솔루션을 찾았습니다.

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

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

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

이것은 (적어도 Chrome과 Firefox에서는) 저에게 적합합니다.

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

이것은 까다로운 것입니다.'no file choosed' 요소를 선택할 방법을 찾을 수 없어서 :after pseudo selector를 사용하여 마스크를 만들었습니다.

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

::-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">

여기에 있는 모든 답은 완전히 너무 복잡하거나, 그렇지 않으면 완전히 틀린 것입니다.

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, Safari & FF에서 작업 가능.

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

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

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

다음 사이트의 가이드를 따르십시오. http://www.quirksmode.org/dom/inputfile.html

불투명도를 0으로 설정해도 툴팁이 나타납니다. 시도해 보십시오.visibility:hidden요소에 그것은가 있습니다.그것은 저에게 효과가 있습니다.

나에게는 그게 효과가 있어요!

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

여러분은 , 다른 의 스타일을 사용할 수 .width,height사용자 자신의 입력 파일을 만들기 위해 다른 속성을 사용할 수 있습니다.

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

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

입력이 숨겨지더라도 링크는 해당 링크에 대한 클릭 대상으로 작동하므로 원하는 대로 스타일을 지정할 수 있습니다.

에 대해 하지 않아 .event.preventDefault()

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

-webkit-appearance:해볼 만하다고요

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

도움이 되길 바라요 :)

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

입력 유형 파일 불투명도를 0으로 만들고 사용자 지정 CSS를 사용하여 상대 요소 [div/span/button]를 배치합니다.

이것을 시도해 보세요 http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

style="color: transparent; width:110px"

이 솔루션은 다음과 같이 효과가 있었습니다.

<input class="ml-4"
       type="file"
       style="color: transparent; width:110px"
       ng2FileSelect
       [uploader]="uploader"
       multiple />

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

이에 대한 좋은 답을 찾고 있습니다.이걸 발견했습니다

먼저 '선택한 파일 없음'을 삭제합니다.

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>

저는 "No file choosed"를 완전히 제거하고 텍스트 뒤에 추가되는 여분의 공간을 추가하는 해킹 솔루션을 생각해 냈습니다(Chrome에서는 "No file choosed"와 같은 것이 나옵니다).

이것은 제 페이지 정렬을 완전히 엉망으로 만들어서, 저는 해결책을 찾기 위해 정말로 그것과 싸웠습니다.입력 태그의 스타일 속성 안에서 "width"를 단추의 너비로 설정하면 후행 텍스트와 공백이 제거됩니다.단추의 너비가 모든 브라우저에서 동일하지 않으므로(예를 들어 Firefox에서는 약간 작음), 페이지 배경과 동일한 색상으로 스타일의 색상을 설정할 수도 있습니다(그렇지 않으면 "아니오"가 표시될 수 있음).내 입력 파일 태그는 다음과 같습니다.

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

약간의 해킹이라는 것은 알지만, 제가 요구한 것은 스타일 시트에서 색상을 투명하게 설정하는 것이었습니다. 인라인은 이런 스타일="color: transparent;"와 같습니다.

도구 설명 숨기기에 가장 적합한 옵션은 다음 속성을 결합하는 것입니다.

1. 입력 시:color:white;(배경이 흰색으로 텍스트 색을 가린 경우, 다른 색을 사용하면 해당 색을 사용합니다.)

2. 입력 용도 옆에 다른 요소가 있는 경우position: absolute;요소를 툴팁 위에 배치하려면 *(버튼이 보이지 않도록 주의하고 툴팁만 숨깁니다.)

3개의 상단이 작동하지 않는 모든 사용자의 경우:

입력 요소를 만듭니다.

<input type='file' name='file' id='file' />

입력 요소에 대해 존재하지 않는 것으로 보이는 Id로 스타일을 설정합니다.

#file{ color: #ffffff; width: 0px; }

그런 다음 원래 입력 앞에 새로운 버튼을 만들고 클릭하면 원래 입력을 클릭하는 자바스크립트가 실행됩니다.

<button onclick='clicker()'>BROWSE</button><input type='file' name='file' id='file' /> 
// can see the new button but not the original input:

자바스크립트:

function clicker(){ document.getElementById('file').click(); }

결과:

function clicker(){
document.getElementById('file').click();
}

#file{
  color: #ffffff;
  width: 0px;
}

<html>
<head>
</head>
<body>
FILE: <button onclick='clicker()'>BROWSE</button><input type='file' id='file'/>
<br>

</body>
</html>

툴팁 제거는 잊어버립니다.파일 입력 용량을 0으로 만들고 절대 위치로 div 박스를 그 위에 놓으면 div를 클릭할 때마다 파일 입력 메시지가 나타납니다.

<div class="file_cover">Click to upload file</div>
<input type="file">

input[type='file'] {
  opacity: 0;
}
.file_cover {
  position: absolute;
  top: 0;
}

이것에 대한 완벽한 해결책을 찾았습니다.

레이블을 추가하여 입력 요소에 연결할 수 있습니다.

<label for="image__input">Choose a file</label>
<input type="file" id="image__input"/>

입력 요소의 기능이 라벨에도 자동으로 적용됩니다.

그런 다음 입력 요소를 다음과 같이 표시하여 제거합니다.

input[type='file'] {
   display: none;
}

그런 다음 원하는 대로 라벨을 스타일링 할 수 있습니다.

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