순수 CSS를 사용하여 input[type=file]의 스타일 제어를 구현하는 방법(코드 예)-CSS 튜토리얼-php.cn

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

不言

풀어 주다： 2018-11-06 11:02:51

원래의

4587명이 탐색했습니다.

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

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

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

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

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

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

코드는 다음과 같습니다:

<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!