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

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

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 조회 752
CSS 25-12-17 조회 517
CSS 25-12-07 조회 651
CSS 25-11-20 조회 575
CSS 25-11-15 조회 657
기타 25-09-21 조회 714
CSS 25-09-09 조회 1,062
CSS 25-09-05 조회 1,058
CSS 25-08-16 조회 1,113
기타 25-07-23 조회 956
CSS 25-07-17 조회 1,284
CSS 25-06-27 조회 1,188
CSS 25-06-12 조회 1,118
CSS 25-06-09 조회 1,168
CSS 25-06-07 조회 972
25-01-30 조회 1,146
HTML 25-01-23 조회 1,410
CSS 24-10-21 조회 1,318
23-12-10 조회 1,800
HTML 24-02-12 조회 1,247
CSS 24-02-11 조회 1,555
CSS 24-01-28 조회 1,494
HTML 23-11-05 조회 2,223
기타 23-10-21 조회 1,483
CSS 23-09-04 조회 2,067
HTML 23-07-13 조회 1,893
CSS 23-06-14 조회 1,792
23-05-04 조회 4,196
23-05-03 조회 5,925
23-06-01 조회 2,223