JavaScript 없이 브라우저 전반에 걸쳐 파일 업로드 버튼 스타일을 어떻게 사용자 정의할 수 있습니까?

브라우저 전반에 걸쳐 파일 업로드 버튼 스타일 사용자 정의

파일 업로드 버튼의 모양을 사용자 정의하는 것은 JavaScript를 사용하지 않고도 어려울 수 있습니다. 그러나 원하는 결과를 얻기 위해 label 태그를 활용하는 간단하고 효과적인 기술이 있습니다.

태그

<라벨> 태그는 텍스트 레이블을 양식 입력과 연결하는 방법을 제공합니다. 레이블 내에 숨겨진 파일 업로드 입력을 포함하면 레이블 내의 클릭 이벤트를 캡처하여 숨겨진 입력으로 리디렉션할 수 있습니다.

CSS 스타일링

한 번 파일 업로드 입력이 숨겨져 있으면 CSS를 사용하여 주변 라벨의 스타일을 자유롭게 지정할 수 있습니다. 예를 들어, 다음 코드는 사용자 정의된 파일 업로드 버튼을 보여줍니다.

label.myLabel input[type="file"] {
    position: absolute;
    top: -1000px;
}

/***** Example custom styling *****/
.myLabel {
    border: 2px solid #AAA;
    border-radius: 4px;
    padding: 2px 5px;
    margin: 2px;
    background: #DDD;
    display: inline-block;
}
.myLabel:hover {
    background: #CCC;
}
.myLabel:active {
    background: #CCF;
}
.myLabel :invalid + span {
    color: #A44;
}
.myLabel :valid + span {
    color: #4A4;
}

HTML 구현

이 기술을 HTML로 구현하려면:

<label class="myLabel">
    <input type="file" required/>
    <span>My Label</span>
</label>

이 접근 방식을 사용하면 JavaScript나 브라우저 정의 입력에 따른 제한 없이 파일 업로드 버튼의 스타일을 완벽하게 제어할 수 있습니다. 크기입니다.

위 내용은 JavaScript 없이 브라우저 전반에 걸쳐 파일 업로드 버튼 스타일을 어떻게 사용자 정의할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!