그냥 개발자 블로그

designSelect.js 플러그인 - select box 스타일 적용 (크로스브라우징 가능) 본문

소식/플러그인소식

designSelect.js 플러그인 - select box 스타일 적용 (크로스브라우징 가능)

마음이파파 2016. 5. 16. 13:00





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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/designSelect.js"></script>

<style>
body{font-size:12px;}
select{
    width:160px;
    height:26px;
}

.designSelect{
    position:relative; 
    display:inline-block; 
    cursor:pointer;
    border:1px solid #ccc;
}
.designSelect .box{
    
}
.designSelect .option_container{
    position:absolute; 
    display:none; 
    left:0px; 
    height:0;
    border:1px solid #ccc;
}
.designSelect .option_container .option{
    background:#fff;
}
.designSelect .option_container .option:hover{
    background:#f1f1f1;
}

</style>


<script>

$(function(){
    
    $('body').designSelect();
        
});    


</script>

<body>

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


</body>

 

1. 제이쿼리를 설치가 필요 합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/designSelect.js"></script>

<style>
body{font-size:12px;}
select{
    width:160px;
    height:26px;
}

.designSelect{
    position:relative; 
    display:inline-block; 
    cursor:pointer;
    border:1px solid #ccc;
}
.designSelect .box{
    
}
.designSelect .option_container{
    position:absolute; 
    display:none; 
    left:0px; 
    height:0;
    border:1px solid #ccc;
}
.designSelect .option_container .option{
    background:#fff;
}
.designSelect .option_container .option:hover{
    background:#f1f1f1;
}

</style>


<script>

$(function(){
    
    $('body').designSelect();
        
});    


</script>

<body>

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


</body>

 

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

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/designSelect.js"></script>

<style>
body{font-size:12px;}
select{
    width:160px;
    height:26px;
}

.designSelect{
    position:relative; 
    display:inline-block; 
    cursor:pointer;
    border:1px solid #ccc;
}
.designSelect .box{
    
}
.designSelect .option_container{
    position:absolute; 
    display:none; 
    left:0px; 
    height:0;
    border:1px solid #ccc;
}
.designSelect .option_container .option{
    background:#fff;
}
.designSelect .option_container .option:hover{
    background:#f1f1f1;
}

</style>


<script>

$(function(){
    
    $('body').designSelect();
        
});    


</script>

<body>

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


</body>

 

2. select 태그 및 적용 시킬 스타일을 작성 합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/designSelect.js"></script>

<style>
body{font-size:12px;}
select{
    width:160px;
    height:26px;
}

.designSelect{
    position:relative; 
    display:inline-block; 
    cursor:pointer;
    border:1px solid #ccc;
}
.designSelect .box{
    
}
.designSelect .option_container{
    position:absolute; 
    display:none; 
    left:0px; 
    height:0;
    border:1px solid #ccc;
}
.designSelect .option_container .option{
    background:#fff;
}
.designSelect .option_container .option:hover{
    background:#f1f1f1;
}

</style>


<script>

$(function(){
    
    $('body').designSelect();
        
});    


</script>

<body>

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


</body>

 

3. 페이지가 열릴때 자동으로 실행되게 함수를 작성 합니다.

 

 

 

 

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




[문의하기]


copyright ⓒ 2017. 워크식스


저작자표시 비영리 변경금지

'소식 > 플러그인소식' 카테고리의 다른 글

slidebanner.js 플러그인 - 슬라이드 배너 플러그인  (3) 2016.08.02
thinScrollbar.js 플러그인 - 스크롤바 스타일 바꾸기  (0) 2016.06.07
제이쿼리 플러그인 만들때 결과 리턴 받기 (callback)  (0) 2016.04.27
pageScroll.js - 원페이지 사이트에 스크롤 부드럽게 움직이는 페이지  (0) 2016.04.13
[jquery] 전체 레이어 팝업 띄우기 플러그인 1.3  (0) 2016.03.05
'소식/플러그인소식' Related Articles more