집 > 기사 > 웹 프론트엔드 > 순수 CSS를 사용하여 input[type=file]의 스타일 제어를 구현하는 방법(코드 예)

순수 CSS를 사용하여 input[type=file]의 스타일 제어를 구현하는 방법(코드 예)

不言원래의: 2018-11-06 11:02:514589검색

이 글의 내용은 순수 CSS를 사용하여 input[type=file]의 스타일 제어를 구현하는 방법에 관한 것입니다(코드 예시).

전체 모양 제어 방법에 대한 일반적인 질문에 대한 솔루션을 검색하면 결과는 다음 3가지 범주 중 하나에 해당할 수 있습니다. 714779e36f6b8fe3da1575391740131b#🎜🎜 #

자바스크립트가 필요합니다.

은 기본 브라우저에서 작동하지 않습니다.

은 실제로 완전한 스타일 제어를 제공하지 않습니다.

위의 세 가지 내용은 제가 온라인에서 찾은 모든 답변에 확실히 들어맞습니다. 하지만 순수한 CSS를 사용하면 이 작업을 수행할 수 있습니다. 스타일을 연결하려면 래핑 요소가 필요합니다(스타일이 너무 제한적이므로 입력 자체는 숨겨집니다). 의미론적으로 이것을 bfdf57554631c62e63917d588904f58a로 바꾸고 싶을 수도 있습니다. 그런데 요소당 여러 개의 레이블을 갖는 데에는 아무런 문제가 없습니다. 아래 예시를 살펴보겠습니다

코드는 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
.fileContainer {
    overflow: hidden;
    position: relative;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}

/* Example stylistic flourishes */

.fileContainer {
    background: red;
    border-radius: .5em;
    float: left;
    padding: .5em;
}

.fileContainer [type=file] {
    cursor: pointer;
}
}
</style>
</head>
<body>
<label class="fileContainer">
    点击这里实现文件上传!
    <input type="file"/>
</label>
</body>
</html>

위 내용은 순수 CSS를 사용하여 input[type=file]의 스타일 제어를 구현하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css input

성명：

이전 기사：CSS를 사용하여 사용자 정의 선택 상자를 구현하는 팁과 요령(코드 예)다음 기사：CSS를 사용하여 사용자 정의 선택 상자를 구현하는 팁과 요령(코드 예)