순수 CSS를 사용하여 input[type=file]의 스타일 제어를 구현하는 방법(코드 예)
- 不言원래의
- 2018-11-06 11:02:514563검색
이 글의 내용은 순수 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.