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

Twitter Bootstrap에서 파일 입력 버튼 사용자 정의

Twitter Bootstrap에서 파일 입력 요소에는 세련된 버튼 디자인이 부족합니다. 그러나 HTML을 사용하여 사용자 정의 가능한 업로드 버튼을 생성하는 간단한 솔루션이 있습니다.

방법:

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

이 접근 방식은 숨겨진 HTML5 속성을 활용하여 기능적인 업로드 버튼을 생성합니다. 버튼으로 나타나는 파일 입력 컨트롤입니다. 버튼의 스타일은 기본 버튼 클래스에서 상속됩니다.

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

숨겨진 속성을 지원하지 않는 브라우저(예: IE8 이하)의 경우 다음을 사용하세요. 이 CSS와 HTML:

HTML:

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

CSS:

.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;
}

이 기술은 이전 IE 버전과의 호환성을 보장합니다. .

추가 정보:

자세한 내용과 예시는 다음의 종합 기사를 참조하세요.

https://www.abeautifulsite.net/posts/whipping-file-inputs-into- 부트스트랩이 있는 모양-3/

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