PLUGIN

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

designSelect_1.6.js

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

사용법

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

<style>
select{
   height:32px;
   line-height: 30px;
   box-sizing: border-box;
   appearance: none;
   -webkit-appearance: none;
}


/* designSelect */
.designSelect{
   position:relative;
   display:inline-block;
   cursor:pointer;
   border:1px solid #e2e2e4;
   border-radius: 0px;
   margin:1px 0px;
   z-index: 10;
}
.designSelect .box{
   text-align: left;
}
.designSelect .box::after{
   font-family: 'Font Awesome 5 Free';
   font-weight:900;
   content:"f107";
   position:absolute;
   right:10px;
   font-size:14px;
   top:1px;
}
.designSelect .option_container{
   position:absolute;
   display:none;
   left:0px;
   height:0;
   border:1px solid #e2e2e4;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
   background: #fff;
}
.designSelect .option_container .option{
   background:#fff;
   text-align: left;
   color:#bdbdbd;
}
.designSelect .option_container .option:hover{
   background:#f1f1f1;
   color:#797979;
}
</style>

<script>
    $(function(){
        if ($("select")[0]) {
            $("select").each(function(){
                $(this).designSelect();
            });
        }
    });
</script>


<select name="option">
    <option value='1'>옵션1</option>
    <option value='2'>옵션2</option>
</select>

 

 

 

설치방법

 

1. Line1 : fontawesome 링크를 추가 합니다.

 

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

 

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

 

4. Line46 ~ 55 : 스타일을 복사 그리고 붙여넣기 합니다. 웹 사이트에 맞게 수정 합니다.

 

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

 

 
 
 
 
 
Install
 

1. Line1: Add the Line1: fontawesome link.

 

2. Line2: Install and connect to jquery.


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

 

4. Line 46 ~ 55: Copy and paste the style. Modify it to fit your website.

 

5. Line59 ~ 65: Copy and paste the script.

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