파일 업로드 버튼의 크기 조정

Question

HTML의 파일 업로드 버튼에 표시된 "찾아보기"섹션의 크기를 조정하고 싶습니다. "크기"또는 "너비"특성을 사용하여 크기를 조정하려고하면 전체 크기 만 줄입니다. 하지만 "찾아보기"버튼 부분의 크기 만 줄이고 파일 경로를 표시하는 텍스트 부분은 필요 없게하고 싶습니다. CSS를 사용하지 않고도이 작업을 수행 할 수 있습니까? 그렇다면 어떻게?

Answer 1

파일 입력 요소는 스타일을 지정하는 것이 어렵습니다. 문제 중 하나는 두 요소로 렌더링 되더라도 실제로는 단일 요소라는 것입니다.

한 가지 방법은 장면 뒤에서 전체 요소를 모호하게 만들고 사용자에게 사용자 지정 요소를 표시하는 것입니다. 약 an article입니다. 기본적으로 파일 입력 요소는 숨겨져 있으며 일부 JavaScript가 지원하는 일부 맞춤 요소는 UI를 처리하고 필요한 정보를 파일 입력에 전달합니다.

Answer 2

일반적으로 찾아보기 단추의 모양을 변경하는 것은 일반적으로 브라우저에 고정되어 있으므로 매우 어렵습니다.

그러나 Quirksmode.org|Styling an input type="file"에는 파일 입력 요소의 모양을 변경하기위한 복잡한 CSS 기술에 대해 설명하는 긴 게시물이 있습니다.