사용자 정의 파일 업로드 버튼

입력 사용자 지정type="file"은 버튼과 변경할 수 없는 텍스트가 함께 제공되기 때문에 약간 성가십니다.
::file-selector-button 의사 선택기를 사용하여 기본 버튼을 편집할 수 있습니다. 일부 CSS 속성은 버튼과 텍스트 모두에 영향을 미치고 일부는 버튼 😒에만 영향을 미치기 때문에 여전히 성가십니다.

또 다른 주의 사항은 브라우저 지원입니다. Firefox를 제외한 모든 주요 브라우저는 의사 선택기를 지원합니다.

자세한 내용은 ::file-selector-button에 대해 읽을 수 있습니다.

기본 업로드 버튼을 사용자 지정하는 방법

html 입력 태그가 있습니다.

<input id="upload" type="file" accept="image/*" />

그런 다음 CSS에서:

input::-webkit-file-upload-button {
  background-color: peru;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px 1px #454545;
  cursor: pointer;
}

-webkit-file-upload-button 대신 file-selector-button 를 사용했습니다. -webkit-file-upload-button는 Chrome 및 Opera와 같은 Webkit/Blink 브라우저용입니다.

"선택된 파일 없음"텍스트를 유지하려는 경우 사용자에게 달려 있습니다. 이 경우에는 보관하고 싶지 않습니다. 완전히 제거할 수 있는지 확실하지 않지만 position: absolute;를 추가하면 버튼 뒤에 텍스트가 놓입니다.

야이!!! 🎉🎉🎉 이제 완전히 맞춤화된 업로드 버튼이 생겼습니다.



full code on codepen.io 을 확인하십시오. 또는 복제git repo