PLUGIN

플러그인 사용을 위해선 도메인을 등록해야 합니다.
플러그인을 설치할 사이트의 도메인을 등록 후 사용법에 따라 이용해 주세요.

designCheckbox_1.2.js

브라우저 종류에 관계 없이 체크박스에 스타일을 적용할 수 있게 해주는 플러그인

사용법

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//work6.kr/plugin/plugin_link/39"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />

<style>
input[type="checkbox"]{
    display:none;
    appearance: none;
    -webkit-appearance: none;
}

/* designCheckbox */
.designCheckbox{
    display:inline-block;
    border:1px solid #e1e1e1;
    width:12px;
    height:12px;
    vertical-align: middle;
    margin-bottom:2px;
    position: relative;
    background: #fff;
}
.designCheckbox::after{

}
input[type="checkbox"].checkbox:checked + label.designCheckbox{

}
input[type="checkbox"].checkbox:checked + label.designCheckbox::after{
    content: "f00c";
    font-family: 'Font Awesome 5 Free';
    font-weight:900;
    line-height: 11px;
    position: absolute;
    top:0px;
    left:0;
    font-size:10px;
}
</style>
  
<script>
$(function(){
  
    if ($('.checkbox')[0]) {
        $('.checkbox').each(function(){
            $(this).designCheckbox();
        });
    }
  
});
</script>
  
<input type="checkbox" value="y" class="checkbox">

 

 

 

 

설치방법

 

1. Line6 ~ 38 : 스타일을 복사 그리고 붙여널기 합니다. 자신에게 맞게 부분적으로 수정 합니다.

 

2. Line1 : 제이쿼리를 설치 및 연결 합니다.

 

3. Line2 : 플러그인 사용하기 후 도메인을 등록 합니다. 코드를 복사 그리고 붙여넣기 합니다.

 

4. Line3 : Font Awesome 을 설치 및 연결 합니다.

 

5. Line42 ~ Line50 : 스크립트를 복사 그리고 붙여넣기 합니다.

 

6. Line53 : input 체크박스에 checkbox 클래스를 추가 합니다.

 

 
 
 
 
 
Install
 

1. Line6 ~ 38: Copy and paste the style. Modify it partially to fit your needs.

 

2. Line1: Install and connect the jquery.

 

3. Line2: Register the domain after using the plug-in. Copy and paste code.

 

4. Line3: Install and connect Font Awesome.

 

5. Line42 ~ Line50: Copy and paste the script.

 

6. Line53: Add a checkbox class to the input checkbox.

 
 
 
 
 
※ 플러그인 문의는 CONTACT US를 이용해 주세요.