코딩할 때 select를 넣으면 select를 열기 전 상태는 css로 어느정도 커버가 가능한데
(색상 변경, 모양 변경, 기본 브라우저 스타일 제거, 화살표 모양 변경)
옵션박스는 그럴수가 없어서 보기 싫을때가 있다. 그럴 때 사용하기 좋은 셀렉트박스 플러그인이다.
자바스크립트 알못인 나도 썼을정도로 간단하고 쉽다.
사용법
jqueryniceselect.hernansartorio.com/
1. 상단의 링크에서 파일을 다운받고 필요한 css파일, 제이쿼리 파일을 사용하려는 위치로 복사해준다.
<link rel="stylesheet" href="nice-select.css">
2. html 상단 헤드부분에 css파일을 불러와준다.
<script src="jquery.nice-select.js"></script>
<script>
$(document).ready(function() {
$('select').niceSelect();
});
</script>
3. <seclect><option></option></seclect> 하단에 제이쿼리 파일을 불러오는 이 소스를 넣어준다
제이쿼리 파일은 수정할게 아니니 아래처럼 cdn링크로 추가하여도 된다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
<script>
$(document).ready(function() {
$('select').niceSelect();
});
</script>
+
링크에 접속해보면 간단한 변형법들(와이드버전, 스몰버전 등) 예시를 볼 수 있다.
+
여러개의 셀렉트박스가 있는데 한개만 하고 싶다거나 몇개만 선택해서 바꿔주고 싶을 경우
해당 seclect에 id를 부여해주고 스크립트의 선택자 부분을 seclect가 아닌 id로 변경해주면 된다.
<script>
$(document).ready(function() {
$('선택자 변경').niceSelect();
});
</script>
반응형
'디자인 정보' 카테고리의 다른 글
[css]순수 css 스크롤 다운 애니메이션 (0) | 2022.05.13 |
---|---|
[css] 순수 css만으로 만드는 햄버거메뉴 (0) | 2022.04.28 |
디자이너를 위한 웹사이트 책갈피 (0) | 2020.09.08 |
[jQuey] 제이쿼리 슬라이드 플러그인 slick slider / jquey slide (0) | 2020.07.13 |
[css] box-shadow (0) | 2020.06.11 |