Html 입력 유형 파일 스타일 변경이 작동하지 않습니다.

Question

누구든지 html로 입력 유형 '파일'의 스타일을 변경할 수 있습니다. 나는 아래의 링크를 참조하십시오 하지만 내 문제가 해결되지 않습니다. 찾아보기 단추에 스타일을 적용하려고 할 때 탐색 단추에 색을 지정해야합니다. 텍스트 상자가 사라집니다. 내가 선택한 파일을 볼 수 없습니다. 텍스트 상자. 여기 내 코드입니다 :

<div id="fileimport"> 
    <div class="fileupload"> 
     <input type="file" name="Upload" style="position: relative" /> 
    </div> 
</div> 

input.file { 
    position: relative; 
    text-align: right; 
    -moz-opacity: 0; 
    filter: alpha(opacity: 0); 
    opacity: 0; 
    z-index: 2; 
} 

div.fileupload { 
    position: relative; 
} 

$('input[type=file]').on('change', prepareUpload); 
function prepareUpload(event) { 
    files = event.target.value; 
    if (files != null) { 
     $("#ShiftValidate").prop('disabled', false); 
    } 
} 

Answer 1

input[type=file] { 
    position: relative; 
    text-align: right; 
    -moz-opacity: 0; 
    filter: alpha(opacity: 0); 
    opacity: 0; 
    z-index: 2; 
} 

Answer 2

버튼이 사라 이유는 당신이 opacity: 0을 가지고 있기 때문에 이렇게하고있다 그것을 완전히, 완전히, 철저하고 투명하게. 나는. 보이지 않는. HG 글쎄, 보이지 않는 사람은 자신에게 0의 불투명도를 부여함으로써 그것을했습니다! opacity: 0.5과 같은 값을 사용해보십시오.

그러나 구문을 수정하려면 Irfan의 대답도 필요합니다.

Answer 3

기본적으로 파일 입력을 숨기고 배치 요소로 바꿔야합니다. 그런 다음 업로드 할 파일의 이름을 가져 와서 다른 입력에 넣으려면 js를 수행해야합니다.

<div class="btnWrap"> <span class="text">Choose file</span> <input type="file" name="file"> </div> <input type="text" class="fileNames" value="No file selected">

나는 당신을 위해 펜을했다 :