``의 스타일 재설정 문제

2816 단어 HTML-CSS

의 스타일 재설정 간단한 방법


HTML 섹션
<label for="">
    <span>span>
    <input type="file" multiple accept="image/jpeg,image/png,image/gif,image/bmp">
label>

span은 사진을 업로드하는 카메라 Icon 등을 설정하는 데 사용됩니다.
input의 accept 속성은 어떤 형식의 파일 (접두사) 을 지원하는지 표시하고, 멀티플렉스는 여러 개의 파일 업로드를 지원합니다.
CSS 스타일
핵심: 원래의 input 요소의opacity를 0으로 하고 전체 부모 요소(어떤 div일 수도 있음)를 가득 채우면 이div를 클릭하면 클릭 효과를 촉발할 수 있습니다.
input[type=file]{ position: absolute; left: 0; top: 0; opacity: 0; height: 100%; width: 100%; }

향상된 기능: 중앙 카메라 icon 추가
스펀지 손질해주기.
.classname span{ position: absolute; left: 0; right: 0; top: 50%; }

좋은 웹페이지 즐겨찾기