CSS3와 JavaScript를 이용한 컴포넌트가 가능합니다. 또는 클릭 시 파일 브라우저를 실행하는 스타일이 지정된 div를 생성할 수 있습니다.
CSS3 스타일링
입력 파일 구성 요소의 스타일을 지정하려면 CSS3를 사용할 수 있습니다. 예를 들어 다음 스타일을 적용할 수 있습니다.
input[type="file"] { display: none; }
이렇게 하면 기본 파일 입력 구성 요소가 숨겨집니다.
JavaScript/jQuery 구현
JavaScript 또는 jQuery를 사용하면 요소. 예를 들어, 클릭하면 파일 브라우저를 실행하는 div를 생성할 수 있습니다.
<div>
#file { display: none; }
var wrapper = $('<div>').css({height: 0, width: 0, 'overflow': 'hidden'}); var fileInput = $(':file').wrap(wrapper); fileInput.change(function() { $this = $(this); $('#file').text($this.val()); }); $('#file').click(function() { fileInput.click(); }).show();
이 스크립트는 원본 입력 파일 구성 요소를 숨기고 "파일 선택"이라는 레이블이 붙은 클릭 가능한 div를 생성합니다. div를 클릭하면 파일 브라우저가 열립니다.
위 내용은 CSS 및 JavaScript를 사용하여 HTML5 파일 입력을 어떻게 사용자 정의할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!