Bootstrap의 파일 입력 버튼 모양을 어떻게 사용자 정의할 수 있나요?

맞춤형 파일 입력 버튼으로 Bootstrap 향상

인기에도 불구하고 Twitter Bootstrap에는 현재 시각적으로 매력적인 파일 요소 업로드 버튼이 부족합니다. 버튼은 CSS가 건드릴 수 없는 기본 브라우저 요소로 남아 있지만 모양을 맞춤설정할 수 있는 실행 가능한 솔루션이 있습니다.

Bootstrap 3-5: 간단한 HTML 솔루션

HTML만 활용하면 다음을 수행할 수 있습니다. 버튼과 유사한 기능적 파일 입력 컨트롤을 만듭니다.

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

IE9를 포함한 최신 브라우저는 이 접근 방식을 쉽게 지원합니다. 그러나 이전 IE 버전과의 호환성을 위해 다음 레거시 접근 방식을 고려하세요.

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

IE8 이하를 지원하려면 다음 HTML/CSS 조합을 사용하세요.

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

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

"CSS bloat"로 알려진 이 기술은 이전 레이블 클릭 시 파일 입력 활성화 부족을 보완합니다. IE 기준:

• 컨테이너의 전체 너비/높이에 걸쳐 파일 입력 확장
• 파일 입력 요소 숨기기

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