디자인천일공책

Html＆JQuery input file with xeicon

페이지 정보

작성자 디자인천일 작성일Date: 2025-03-27 20:46 조회view: 6

본문

input file with xeicon


css를 이용한 file입력폼 디자인

css

/* file */
.file_wr .frm_file {border:var(--bdr);border-radius:var(--radius);}
.file_wr .frm_file::file-selector-button {display:none;}
.file_wr .frm_file:after {content:'\eb7e';display:block;position:absolute;right:0px;bottom:0px;width:40px;color:#fff;font-family:"xeicon";color:#bbb;font-size:20px;text-align:center;line-height:var(--h);text-indent:0;background:none;cursor:pointer;
-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;
}

html

<div class="file_wr">
	<input type="file" name="wr_file" id="wr_file" value="" class="frm_input frm_file">
</div>