Twitter Bootstrap 파일 업로드 버튼 모양을 어떻게 사용자 정의할 수 있나요?

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

Twitter Bootstrap에는 파일 업로드 버튼에 대한 전용 스타일이 없음에도 불구하고 모양을 향상시키는 여러 가지 방법이 있습니다.

Bootstrap 버전 3, 4, 5에 적용할 수 있는 한 솔루션은 HTML5 숨겨진 속성을 활용하여 기능적인 파일 입력 컨트롤을 생성합니다. 버튼과 유사한:

<label class="btn btn-default">
  Browse <input type="file" hidden>
</label>

이 접근 방식은 Bootstrap 4가 호환성을 위해 CSS로 에뮬레이션하는 숨겨진 속성에 의존합니다. Bootstrap 3의 경우 다음과 같은 추가 CSS가 필요할 수 있습니다.

[hidden] {
  display: none !important;
}

이전 IE에 대한 레거시 접근 방식:

IE8 이하는 다른 HTML/CSS가 필요합니다. 구조:

<span class="btn btn-default btn-file">
  Browse <input type="file">
</span>

.btn-file {
  /* ... */
}

.btn-file input[type=file] {
  /* ... */
}

참고:

• 이전 IE에서는 레이블 클릭 시 파일 입력 트리거를 허용하지 않습니다.
• CSS는 파일을 확장하여 보상합니다. 범위에 맞게 입력한 후 숨깁니다.

자세한 내용과 예시는 Abeautifulsite의 블로그 게시물: https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

위 내용은 Twitter Bootstrap 파일 업로드 버튼 모양을 어떻게 사용자 정의할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!