[CSS] form input[file, radio] 커스텀하기

form input[type="file"] 커스텀 하기

input file은 기본적으로 아래와 같이 나온다.

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

커스텀을 해야했는데 label로 감싸고 input을 내부에 넣어주었다.

 

 

uploadName부분에는 올라갈 파일이 기재된다. (스크립트 추가)

html

<div class="submitFile">
    <div class="subHead">제출서류</div>

    <div class="userCon">
        <span class="userInfor">이력서</span>
        <div class="fileBox">
            <img src="images/icon_file.png" alt="">
            <label for="file" id="fileTxt">
                <span class="hide">이력서 첨부</span>
                <input class="uploadName" >
                <!--value="이력서 첨부"-->
                <input type="file" id="file">
                <!--기존 모양 숨김 처리-->
            </label>
        </div>
    </div>
</div>

 

css

/* 이력서 파일 제출*/
.applyContainer form .submitFile {margin-bottom: 65px;}
.applyContainer form .submitFile .fileBox {display: flex; align-items: center; height: 55px; padding-left: 18px; border-radius: 10px; background-color: #d0cccd;}
.applyContainer form .submitFile .fileBox img {margin-right: 5px;}
.applyContainer form .submitFile .fileBox .hide {font-size: 18px; font-family: 'NotoSansR'; color: #3f3f3f;}
.applyContainer form .submitFile .fileBox input {width: auto; background-color: #d0cccd;}
/* 이력서 기존 디자인 없애기*/
.applyContainer form .submitFile .fileBox input[type="file"] {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;}

 

script

$(document).ready(function(){
  $('#file').on('change', function(){
    var fileName = $('#file').val();
      $(".uploadName").val(fileName);
  });
});

 

참고

custom input[type="file"] - 폼 커스텀 파일업로드 #1

---

form input[type="radio"] 커스텀 하기

 

html구조

<div class="chkCon">
  <div class="chkForm">
    <input type="radio" name="chk_info" checked="checked" id="agr">
    <label for="agr" class="agree">동의합니다.</label>
  </div>
  <div class="chkForm">
    <input type="radio" name="chk_info" checked="checked" id="noagree">
    <label for="noagree" class="agree">동의하지 않습니다.</label>
  </div>
</div>

chkForm의 상위 부모는 chkCon으로 한번 더 감싸주었다.

.chkForm으로 input과 label을 감쌌음.

 

css

1. radio 기본 양식을 없애준다.

opacity를 통해 기본 동그라미를 없애준다.

/* radio 기본양식 없애기 */
.chkCon .chkForm input[type="radio"] {
position: relative; 
width: 1px; 
height: 1px; 
margin: -1px; 
overflow: hidden; 
opacity: 0; 
}

2. 라디오버튼의 모양을 바꿔주고, radio가 클릭되었을 때 label의 앞에 이미지를 넣어준다.

/*라디오버튼 뒤의 label*/
.chkCon .chkForm input[type="radio"] + label { 
position: relative; 
display: inline-block; 
cursor: pointer; 
margin-right: 5px;
}

/*라디오버튼 뒤의 label:before의 모양 바꿔주기*/
.chkCon .chkForm input[type="radio"] + label:before {
margin-right: 5px; 
content: ''; 
background: url("../images/nonDot.png")no-repeat center; 
background-size: contain;
width: 15px; 
height: 15px;
display: inline-block; 
}

/*라디오버튼이 클릭되었을때 바로 뒤의 label:before의 모양 바꿔주기*/
.chkCon .chkForm input:checked + label:before {
width: 15px; 
height: 15px; 
background: url("../images/redDot.png") no-repeat center;  
background-size: contain;
}

 

기봉양식을 없애기 전의 radio버튼

변경된 라디오버튼

 

---

참고자료

input[type="file"] 커스텀하기