자리 표시 자 텍스트 및 버튼 디스플레이 사용자 정의 (bootstrap 4.1)

.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}

2. 선택된 파일 이름을 검색하고 입력 업데이트 :

파일이 선택되면 JavaScript를 사용하여 이름을 얻을 수 있습니다. 그러나 자리 표시자가 의사 요소가되기 때문에 JavaScript를 통해이를 조작하는 직접적인 방법은 없습니다. 대신 파일이 선택되면 자리 표시자를 숨기기 위해 추가 CSS 클래스를 작성하십시오. 내용 : ""! 중요; } 파일을 선택할 때 jQuery를 사용하여 .custom-file-control에서 .Select Class를 전환하여 자리 표시자를 숨기고 파일 이름을 표시합니다. var filename = $ (this) .val (); $ (this) .next ( '. form-control-file'). addClass ( "selected"). html (filename); })

bootstrap 5

#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}