Bootstrap 4 파일 입력에서 \"파일 선택...\" 자리 표시자를 사용자 정의하는 방법은 무엇입니까?

Bootstrap 4 파일 입력의 과제 극복

Bootstrap 4에서 파일 브라우저는 "파일 선택..."이라는 영구 텍스트를 표시합니다. 파일 선택에도 불구하고. 이 문제는 custom-file-control CSS 클래스 내의 숨겨진 값으로 인해 발생합니다. JavaScript를 사용하여 선택한 파일의 값을 검색할 수 있지만 자리 표시자 텍스트를 변경하는 것은 더 복잡할 수 있습니다.

자리 표시자 텍스트 및 버튼 표시 사용자 정의(Bootstrap 4.1)

Bootstrap 4.1이 도입되면서 "파일 선택..." 자리 표시자는 사용자 정의 파일 레이블 클래스에 있습니다. 이 텍스트를 수정하려면 다음과 같이 사용자 정의 CSS 또는 SASS를 추가하기만 하면 됩니다.

<code class="css">.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}</code>

숨겨진 자리 표시자 값 처리

Bootstrap 4 Alpha 6(원본 답변 )

1. 초기 자리 표시자 및 버튼 텍스트 수정:

초기 자리 표시자 및 버튼 텍스트는 CSS 의사 요소에 저장됩니다. 이를 사용자 정의하려면 각각 :lang(en)::after 및 :lang(en)::before 선택기를 사용하여 기본값을 재정의합니다.

<code class="css">#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

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

2. 선택한 파일 이름 검색 및 입력 업데이트:

파일을 선택하면 JavaScript를 사용하여 해당 이름을 얻을 수 있습니다. 그러나 자리 표시자는 의사 요소이므로 JavaScript를 통해 직접 조작할 수 있는 방법은 없습니다. 대신, 파일이 선택되면 자리 표시자를 숨기도록 추가 CSS 클래스를 만듭니다.

<code class="css">.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}</code>

파일 선택 시 jQuery를 사용하여 .custom-file-control에서 .selected 클래스를 전환하여 자리 표시자를 숨기고 파일 이름 표시:

<code class="javascript">$('.custom-file-input').on('change',function(){
  var fileName = $(this).val();
  $(this).next('.form-control-file').addClass("selected").html(fileName);
})</code>

Bootstrap 5

Bootstrap 5에서는 사용자 정의 파일 입력이 제거되었습니다. 자리 표시자 텍스트를 변경하려면 JavaScript 또는 사용자 정의 CSS. 예:

<code class="css">.custom-file-input::after {
    content: "Button Text";
}</code>

위 내용은 Bootstrap 4 파일 입력에서 \"파일 선택...\" 자리 표시자를 사용자 정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!