부트 스트랩 입력 파일 커서

Question

이 library을 사용하여 부트 스트랩 테마로 멋진 입력 파일 버튼을 만듭니다.
버튼에 커서 포인터를 추가했지만
전체 버튼에 커서가 표시되지 않습니다.

<button style="cursor:pointer" /> 

DEMO

Answer 1

당신이 사용할 수있는 코드 :

$fileButton = $('<button style="cursor:pointer" class="' + config.uploadButtonClass + '">' + config.uploadText + '</button>').insertBefore($self); 

과 스타일을 추가합니다 :

 $fileButton.on('click', function(){ 
      $(this).next('input').trigger('click'); 
     }); 

후

.inputfile .btn{ 
    position:relative; 
    z-index:2; 
} 

픽셀 및 overwflow : 숨겨진 16,

Answer 2

나는 당신이 높이 사업부로 배치하여 입력을 숨길 수 자바 스크립트

를 사용하여 다른 방법으로 이런 짓을했는지. 그런 다음 원하는대로 스타일을 지정할 수있는 버튼이나 다른 html 요소를 추가합니다. onclick 이벤트에서 당신은 자바 스크립트 또는 jQuery를 사용하여 입력 필드를 얻고을 클릭 :

HTML :

<div style="height:0px;overflow:hidden"> 
    <input type="file" id="fileInput" name="fileInput" /> 
</div> 
<button style="cursor:pointer" onclick="chooseFile();" class="btn btn-defualt"><span style="cursor:pointer" class="glyphicon glyphicon-upload"></span> Search for a file to add</button> 

이제 입력이 숨겨져 있지만, 그것은 것입니다 원하는대로 당신은 버튼 스타일을 지정할 수 있습니다 클릭시 항상 파일 입력을 엽니 다.

자바 스크립트 : 여기

function chooseFile() { 
     document.getElementById("fileInput").click(); 
    } 

내가 제대로 이해하면 문제가 브라우저 도움이 CSS에 의해 생성 된 스타일 그림자 DOM 입력 태그에 없게되었다 Live Demo

Answer 3

입니다 나 같은 호에 :

input[type="button"]::-webkit-file-upload-button, 
    input[type="file"]::-webkit-file-upload-button, 
    button::-webkit-file-upload-button { 
    cursor: pointer; 
    }