HTML 파일 업로드 필드 스타일

Question

스타일이 약간있는 파일 업로드 필드를 만들려고하는데이 문제를 찾는 데 문제가있는 것 같습니다. 그 이유 중 일부는 브라우저 자체에서 필드 자체가 다르다는 것입니다.

아이디어가 있습니까? 아니면 스타일을 지정할 수있는 파일 요소를 사용하지 않고이 작업을 수행 할 수있는 방법이 있습니까?

Answer 1

파일 이름의 텍스트 필드가 있으면 css 파일의 input [type = file] 선택기를 사용할 수 있습니다. 예를 들어 :

input[type=file] { background-color: red; } 

무엇을 의미하는 것은 파일 선택 대화 상자 인 경우는, 나는 그것이 브라우저/OS에 의존 생각하고 (있는 경우) 당신이 그것에 대해 할 수있는 작은있다.

Answer 2

여기 내가 찾은 일부 링크입니다 : 내가 전에이 문제에 올라와있다

QuirksMode Article

One Extra Pixel Article (look for the file input styling section)

Answer 3

. 불행히도 파일 업로드는 브라우저간에 일관되게 스타일을 지정하는 것이 거의 불가능합니다. CSS 2에서 볼 때, W3C 표준은 명확하게 동작을 정의되지 않은 채로 남겨 둡니다. 여러 플랫폼에서 구현해야하는 방법이 여러 가지라고 생각합니다. 예를 들어, Firefox는 업로드 요소 자체에서 설정 한 속성 중 일부만 상속받은 파일 업로드 요소 내부에 익명의 버튼과 입력 요소를 생성합니다.

예를 들어 Furuno의 방법을 사용하여 일부 기능을 사용할 수 있지만 동작이 불규칙하며 플랫폼/브라우저에 따라 크게 다를 수 있습니다.

Answer 4

This은 귀하의 요구 사항에 적합합니다.

Answer 5

당신이 jQuery를 사용하는 경우,이 플러그인을 살펴 가지고 - https://github.com/ajaxray/bootstrap-file-field

(구성 클래스 포함) 부트 스트랩 버튼과 파일 입력 필드를 표시하고 선택한 파일 이름 (또는 선택의 오류를 표시합니다이 작은 플러그인) 아름답게.

또한 간단한 데이터 속성 또는 JS 설정을 사용하여 다양한 제한을 설정할 수 있습니다.
e, g, data-file-types="image/jpeg,image/png"은 jpg 및 png 이미지를 제외한 파일 형식 선택을 제한합니다.