입력 유형의 크기를 조정하려면 firefox에서 "file"찾아보기 버튼을 클릭하십시오.

Question

어쨌든 CSS 또는 JS를 사용하여 입력 유형 = "파일"의 크기를 조정할 수 있습니까? Firefox에서 찾아보기 버튼?

나는 단추의 텍스트를 변경할 수 없다는 것을 알고 있지만 파이어 폭스의 경우이 단추를 더 넓게 만들면된다. 그래서 -moz css 규칙을 사용하면 완벽 할 것입니다.

Answer 1

스타일러스 파일 입력 버튼은 보안상의 이유로 매우 제한적입니다. 몇 가지 해결 방법이 있지만 완벽한 것은 없습니다. 쿼크 모드에이 게시물을 체크 아웃 :

http://www.quirksmode.org/dom/inputfile.html

Answer 2

편집 : 다른 사람은 나는 다음 링크를 참조 것보다 파이어 폭스 방법을 suuport하지 않는 언급했듯이 http://www.quirksmode.org/dom/inputfile.html

다음은 아주 간단한 해결책이되어 다음 . 레이블에 수업을 추가하는 것이 좋습니다. 기본적으로 당신은 크로스 브라우저 문제와 너비와 높이 버그 피하는 입력 대신 라벨을 스타일 :

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

CSS를

label input{-moz-opacity:0 ;filter:alpha(opacity: 0);opacity: 0;} 
label {background:green;width:200px;height:100px;display:block; /* more styles here */} 

http://jsfiddle.net/DVLxp/

Answer 3

그들이는 "맞춤형"필요할 때 웹 사이트가 수시로 파일 업로드 위젯 : "실제"파일 업로드 필드를 숨겨 둡니다. 파일 업로드 필드의 현재 값을 표시하는 텍스트 필드와 파일 업로드 필드에서 파일 선택을 트리거하는 버튼을 추가하십시오. 여기에 예제 : 여기

<input id="file" type="file" style="display: none;" 
     onchange="document.getElementById('text').value = this.value;"> 

<input id="text" type="text" readonly><input type="button" 
     onclick="document.getElementById('file').click();" value="Choose file"> 

Answer 4

메인 아이디어 : http://www.quirksmode.org/dom/inputfile.html

그리고 이것은 나를 위해 입력 영역을

input{font-size: 100px;} 

작품 미세 크기를 조정에 도움이 될 수 있습니다.

Answer 5

나에게있어서, Zhenya Shevchenko는 최고의 작업 솔루션 중 하나를 제공했습니다. 자신의 방법을 사용하여, 우리는 크로스 브라우저 파일 입력 버튼을 만들 수 있습니다 http://jsfiddle.net/CnHj5/ 파이어 폭스의 작품과 좋은 포인터 커서로 볼 수 있습니다 : http://jsfiddle.net/JHcFR/

<div class="fileInput"> 
    <input type="file" /> 
</div> 

.fileInput { 
    overflow: hidden; width: 500px; height: 200px; background: red; 
} 
.fileInput input { 
    font-size: 200px; opacity: 0; 
    float: right; filter: alpha(opacity=0); /*IE*/ 
} 

Answer 6

이 하나를 시도하십시오.

HTML :

<div class="upload"> 
    <input class="upload" type="file" /> 
</div> 

CSS : 이것은 완벽하게 작동

input.upload { 
    -moz-opacity:0; 
    filter:alpha(opacity: 0); 
    opacity: 0; 
    position: absolute; 
    right:0; 
    font-size: 200px; 
    cursor: pointer; 
} 
div.upload { 
    background-color:green; 
    width:200px; 
    height:100px; 
    position: relative; 
    display:block; 
    overflow:hidden;}