찾아보기 버튼을 어떻게 사용자 정의 할 수 있습니까?

Question

업로드 파일 필드의 찾아보기 버튼을 사용자 정의 (배경 및 색상 변경이 필요함)하고 싶습니다.

<input type="file" tabindex="6" class="medium" size="20" value="" id="input_5_13" name="input_13"> 

Answer 1

수 없습니다. 자신 만의 버튼을 만들어 실제 입력을 트리거해야합니다.

여기에서 jQuery를 사용하면됩니다. 참조 working example.

HTML :

<input type="file" class="hidden" id="uploadFile"/> 
<div class="button" id="uploadTrigger">Upload File</div> 

jQuery를 :

$("#uploadTrigger").click(function(){ 
    $("#uploadFile").click(); 
}); 

CSS :

.hidden { 
    display:none; 
} 
.button { 
    border: 1px solid #333; 
    padding: 10px; 
    margin: 5px; 
    background: #777; 
    color: #fff; 
    width:75px; 
} 

.button:hover { 
    background: #333; 
    cursor: pointer; 
} 

Answer 2

은 직접 찾아보기 버튼을 사용자 정의 할 수 없습니다. 귀하의 CSS는 그것에 작동하지 않습니다.

할 수있는 작업은 왼쪽에있는 입력란을 사용하여 버튼을 만들 수 있습니다. 그것을 사용자 정의하고, 클릭시 원본 파일 업로드를 트리거하십시오.

이 link 및 this

Answer 3

는 찾아보기 단추의 변화에 ​​대해 다음 확인을 참조하십시오 :

Browse button design

1. Browse button css
이 링크는 당신을 도울 것입니다 바랍니다.

Answer 4

스타일링 파일 입력 버튼 뒤에 기본 전제가 파일을 통해 절대 위치 제어를 오버레이하는 것입니다 업로드. 파일 업로드 불투명도가 0으로 설정되어 표시되지 않습니다. 컨트롤의 Z- 인덱스는 파일 업로드보다 낮게 설정되지만 Z- 인덱스는 오버레이 된 컨트롤 위에 설정됩니다. 사용자가 생각하는 그래서 때 여기에 0

정말 거친 예입니다 설정 불투명도 업로드가 실제로 파일을 클릭하는 오버레이 컨트롤을 클릭하면됩니다

HTML이

<div id="file-upload-cont"> 
    <input id="original" type="file"/> 
    <div id="my-button">Find</div> 
    <input id="overlay"/> 
</div> 

CSS

#my-button{ 
    position: absolute; 
    border: 1px solid black; 
    background: green; 
    padding 3px; 
    width: 50px; 
    height: 25px; 
    text-align: center; 
    left: 148px; /* Positioning over file-upload */ 
    top: 0px; 
    z-index: 1; /* Lower z-index causes controls to sit under file upload */ 
} 

#overlay{ 
position: absolute; 
z-index: 1; /* Lower z-index causes controls to sit under file upload */ 
left: 0; /* Positioning over file-upload */ 
} 

#original{ 
    opacity: 0; /* Opacity makes it invisible*/ 
    position: relative; 
    z-index: 100; /* z-index causes original file upload to sit above other controls*/ 
} 

#file-upload-cont{ 
    position: relative; 
} 

작업 예제http://jsfiddle.net/tP8KY/1/