JavaScript 없이 브라우저 전체에서 일관되게 파일 업로드 버튼의 스타일을 지정하려면 어떻게 해야 합니까?

브라우저 간 파일 업로드 버튼 스타일 지정

브라우저 불일치로 인해 파일 업로드 버튼을 사용자 정의하는 것이 어려울 수 있습니다. Quirksmode 기술이 포함된 기존 접근 방식은 원하는 기능이나 스타일을 항상 제공하지 못할 수도 있습니다.

요소

JavaScript를 사용하지 않고 파일 업로드 버튼의 스타일을 지정하는 더 효과적인 방법은 요소. 숨겨진 파일 입력을 로 래핑하면 클릭 이벤트를 자연스럽게 입력 필드로 리디렉션할 수 있습니다. 이 접근 방식을 사용하면 브라우저에서 정의한 입력 크기에 비해 스타일을 더 자유롭게 지정할 수 있습니다.

구현 세부 정보

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

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

이 접근 방식을 사용하면 파일 버튼이 상위 div의 전체 크기로 Quirksmode 기술에서 발생하는 문제를 제거합니다. 또한 다양한 스타일 옵션이 가능해 파일 업로드 버튼의 모양을 완벽하게 제어할 수 있습니다.

위 내용은 JavaScript 없이 브라우저 전체에서 일관되게 파일 업로드 버튼의 스타일을 지정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!