Bootstrap 4\의 파일 입력 구성 요소를 사용자 정의하는 방법은 무엇입니까?

Bootstrap 4의 파일 입력 제한 사항 해결

Bootstrap 4는 사용자가 파일을 쉽게 선택할 수 있도록 사용자 정의 파일 입력 구성 요소를 제공합니다. 그러나 "파일 선택..." 자리 표시자 텍스트를 사용자 정의하거나 선택한 파일 이름을 표시하려는 경우 몇 가지 문제에 직면할 수 있습니다.

Bootstrap 4.1 이상에서 자리 표시자 변경

Bootstrap 4.1부터 자리 표시자 텍스트는 custom-file-label 요소에 있습니다. CSS로 재정의할 수 있습니다.

<code class="css">.custom-file-label::after {
  content: "Select file...";
}</code>

파일 버튼 텍스트 조정

Bootstrap 4.1은 파일 버튼 텍스트를 변경하는 간단한 방법을 제공하지 않습니다. 이를 달성하려면 몇 가지 사용자 정의 스타일을 추가하는 것이 좋습니다.

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

Bootstrap 4.4에서 선택한 파일 이름 표시

Bootstrap 4.4를 사용하면 선택한 파일 이름을 일반 형식으로 표시할 수 있습니다. JavaScript:

<code class="javascript">document.querySelector('.custom-file-input').addEventListener('change', function(e) {
  var fileName = document.getElementById("myInput").files[0].name;
  var nextSibling = e.target.nextElementSibling
  nextSibling.innerText = fileName
})</code>

Bootstrap 4.1 이전 옵션:

초기 자리 표시자 숨기기:

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

선택한 파일 이름 표시:

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

이러한 접근 방식은 Bootstrap 4의 파일 입력 구성 요소를 사용자 정의하는 유연성을 제공하여 이를 특정 요구 사항에 맞게 조정할 수 있습니다.

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