designCheckbox_1.2.js

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

샘플영상

다운로드

designCheckbox_1.2.js 다운로드

설치/사용법

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/designCheckbox_1.2.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.13/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. Line1 : 제이쿼리를 설치 및 연결 합니다.

 

2. Line2 : 다운로드 받은 플러그인을 설치 및 연결 합니다.

 

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

 

4. Line6 ~ Line38 : 스타일을 복사 그리고 붙여넣기 합니다. 자신의 홈페이지에 맞게 부분적으로 수정 합니다.

 

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

 

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

 

 
 
 
 
 
Install
 

1. Line1: Install and Connect the jQuery.

 

2. Line2: Install and connect the downloaded plug-in.

 

3. Line3: Install and Connect the 'Font Awesome'.

 

4. Line6 ~ Line38 : Copy and paste the style. Partially modify it to fit your Web site.

 

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

 

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

 
 
 
 
 
플러그인 설치/보수는 무료로 지원 하지 않습니다.
위로

잠시만 기다려주세요.