[워크식스] select 에 css 적용하기 - designSelect_1.4.js

select 에 css를 적용할 수 있게 해주는 플러그인

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/designSelect_1.4.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />

<style>

    select{
        height:32px;
        line-height: 30px;
        box-sizing: border-box;
    }

    .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 : 제이쿼리를 연결 합니다.

2. Line2 : 다운로드 받은 플러그인을 설치 및 연결 합니다. 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다.

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

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

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

Install

1. Line1: Connect the jQuery.

2. Line2: Install and connect the downloaded plug-in. Plug-in can be downloaded from the work6.kr Web site.

3. Line3: Install and connect the Font Awesome.

4. Line5 ~ Line58: Copy and paste the style. Partially modify it to fit your homepage.

5. Line61 ~ Line67: Copy and paste the script.

플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다.

[문의하기]

copyright ⓒ 2018. 워크식스