JavaScript 없이 브라우저 전체에서 파일 업로드 버튼의 스타일을 어떻게 지정할 수 있습니까?

파일 업로드 버튼에 대한 크로스 브라우저 사용자 정의 스타일 [중복]

소개:

스타일 파일 업로드 버튼은 다음과 같습니다. 브라우저에서 정의한 크기로 인해 어려움이 있습니다. 기존 접근 방식에는 JavaScript 또는 Quirksmode의 기술이 포함되는 경우가 많으며 여기에는 제한이 있을 수 있습니다. 여기서는 JavaScript가 필요 없는 더욱 사용자 친화적이고 효과적인 솔루션을 살펴보겠습니다.

답변:

간단하고 효율적인 방법은 숨겨진 파일 업로드 주위에 태그를 지정하세요. 버튼을 클릭하세요.

HTML:

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

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과 CSS를 사용하여 손쉽게 원활한 사용자 인터페이스와 더 나은 전반적인 웹 디자인 경험을 제공합니다.

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