탈

파일 입력필드 숨기고 아이콘(폰트어썸)으로 대체

· 2023-12-10 (일) 23:45:41 · 1843

1.HTML

<div class="file-upload">

  <input type="file" id="file" class="file">

  <i class="fas fa-upload"></i>

</div>

 

2.CSS

.file-upload {

  position: relative;

}

 

.file {

  display: none;

}

 

.fas {

  cursor: pointer;

}

 

3.JavaScript

document.querySelector(".fas").addEventListener("click", function() {

  document.querySelector(".file").click();

});

|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

1,282건

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
CSS 25-12-27 조회 807
CSS 25-12-17 조회 591
CSS 25-12-07 조회 716
CSS 25-11-20 조회 636
CSS 25-11-15 조회 720
기타 25-09-21 조회 833
CSS 25-09-09 조회 1,105
CSS 25-09-05 조회 1,096
CSS 25-08-16 조회 1,147
기타 25-07-23 조회 991
CSS 25-07-17 조회 1,323
CSS 25-06-27 조회 1,252
CSS 25-06-12 조회 1,281
CSS 25-06-09 조회 1,220
CSS 25-06-07 조회 1,022
25-01-30 조회 1,198
HTML 25-01-23 조회 1,453
CSS 24-10-21 조회 1,354
23-12-10 조회 1,844
HTML 24-02-12 조회 1,292
CSS 24-02-11 조회 1,595
CSS 24-01-28 조회 1,536
HTML 23-11-05 조회 2,291
기타 23-10-21 조회 1,532
CSS 23-09-04 조회 2,113
HTML 23-07-13 조회 1,941
CSS 23-06-14 조회 1,836
23-05-04 조회 4,240
23-05-03 조회 6,004
23-06-01 조회 2,253