CSS3 및 JavaScript를 사용하여 파일 입력 요소의 스타일을 어떻게 지정할 수 있습니까?

CSS3 및 JavaScript를 사용하여 입력 파일 요소 스타일 지정

파일 입력과 같은 기본 HTML 입력 요소 스타일을 지정하는 것은 어려울 수 있습니다. 그러나 CSS3 및 JavaScript를 사용하여 모양을 향상하고 사용자 정의 파일 선택 환경을 생성할 수 있습니다.

파일 입력 스타일 지정을 위한 CSS3 옵션

CSS3은 직접 제공하지 않습니다. 파일 입력 요소 스타일 지정 지원. 그러나 WebKit 렌더링 엔진(예: Chrome, Safari)을 지원하는 브라우저에서는 ::-webkit-file-upload-button 의사 요소를 사용할 수 있습니다.

::-webkit-file-upload-button {
  background-color: #00f;
  color: #fff;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px 10px;
}

JavaScript 파일 선택 옵션

대체 접근 방식은 다음과 같은 경우 파일 입력을 트리거하는 사용자 정의 div 요소를 생성하는 것입니다. 클릭했습니다.

<div><pre class="brush:php;toolbar:false">document.getElementById('file-button').addEventListener('click', () => {
  document.getElementById('file-input').click();
});

document.getElementById('file-input').addEventListener('change', () => {
  const filename = document.getElementById('file-input').value.split('\').pop();
  document.getElementById('file-button').textContent = filename;
});