JavaScript 없이 파일 업로드 버튼의 스타일을 어떻게 지정할 수 있나요?

JavaScript 없이 파일 업로드 버튼 스타일 지정

파일 업로드 버튼을 사용자 정의하려는 많은 시도는 크기 및 자동 조정 측면에서 제한이 있는 JavaScript 또는 Quirksmode의 접근 방식을 사용하는 경우가 많습니다. 이 문서에서는 태그.

<라벨> 태그

<라벨> 요소를 사용하면 JavaScript 없이 파일 업로드 버튼의 스타일을 지정할 수 있습니다. 클릭 이벤트를 하위 요소로 전달하여 숨겨진 파일 업로드 버튼의 래퍼로 사용할 수 있습니다.

코드 예

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

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

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

이 예에서는 숨깁니다. position:absolute 및 top:-1000px를 사용하여 파일 업로드 버튼을 만들고 원하는 대로 태그를 지정합니다. 레이블은 클릭 이벤트를 수신하여 숨겨진 입력 버튼으로 전달합니다.

이 접근 방식의 장점

• 웹킷에 내장된 스타일에 비해 스타일의 유연성이 더 높습니다.
• 자바스크립트가 필요하지 않아 더욱 효율적입니다.
• 자바스크립트의 한계를 극복합니다. Quirksmode의 접근 방식으로 파일 버튼을 사용하여 상위 컨테이너 전체를 채울 수 있습니다.

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