jquery

JQuery Dropdown Plugin 사용해서 폼(form) <select> 스타일 변경하기

핑계/ editor

  • 3 comments
  • 2,157 views
  • 2018년 2월 12일

jQuery dropdown plugin 사용해서 폼(form) <select> 스타일을 변경해 보아요~

폼(form) <select> 스타일은 CSS를 사용해서 조금은 변경할 수 있지만
디자이너의 마음에 쏙 들게 변경하는건 사실상 불가능합니다.ㅜㅠ

그래서 jQuery dropdown plugin 을 많이 사용하지요.^^

jQuery dropdown plugin 의 원리는 아주 간단하게 말하면
<select> 요소를 숨기고 그 위에 <ul>, <li> 요소로 덮어씌우는 것입니다.

Google에서 jQuery dropdown plugin 서치해보면 여러가지 플러그인이 나오는데
jqueryscript.net 요기에 jQuery dropdown plugin 종류 많아요.

저는 그중에 Pretty-Dropdowns Plugin 을 다운받아서 웹페이지에 적용해볼께요.

 

1. JQuery Dropdown Plugin 웹페이지에 적용하기

 

제가 예로 보여드릴 <select> 는 아래와 같습니다.

Markup

               

브라우저에서 제공하는 <select> 기본모양은 아래와 같습니다. 정말 안예뿌죠?

HTML5AROUND on html5around.com

 

JQuery Dropdown Plugin 웹페이지에 적용하기 지금부터 시작합니다!

– 다운받은 플러그인 zip 파일을 풀고 폴더를 열어주세요.
  여러개의 폴더중에 dist 폴더를 엽니다.

– dist 폴더안에 css폴더와 js폴더가 있는것을 확인할 수 있습니다.

– html <head>안에 css파일과 js파일 링크를 걸어주세요.
  jquery를 사용해야 하니까 jquery CDN 주소도 적어주세요.




– prettydropdowns.js 파일을 링크를 설정해준 뒤
  <select> 요소에 prettyDropdown() api 를 붙여주세요.

Jquery


<select> 요소에 prettyDropdown plugin 을 적용한 모습입니다.

HTML5AROUND on html5around.com

 

 

2. JQuery Dropdown Plugin 스타일 내맘대로 변경하기

 

사실 prettyDropdown plugin 을 적용한 모습을 보면 별로 크게 달라진걸 못느낄수도 있는데요 ~

prettyDropdown plugin 이 적용된 html 구조를 보면
class 이름이 “prettydropdown arrow” 2개 가지고 있는 <div> 요소 안에 <ul>, <li> 가 생성된 것을 볼 수 있습니다.

그래서 전체적인 사이즈는 <div> 요소에 적용해주면 되구, 세세한 스타일은 <ul>, <li> 요소에 적용해주심 됩니다.
아까 다운받은 prettydropdowns.css 파일을 열어서 직접 수정해주셔도 되구, 아님 새로운 css 파일을 만들어서 스타일을 적용하셔도 됩니다.

이쁘게 변경해보세요.

HTML5AROUND on html5around.com

 


 

CSS로 폼(form) <select> 스타일 변경하고 싶으신 분들은
CSS로 폼(form) <select> 스타일 변경하기 글을 읽어주세요 ~

핑계

댓글 먹고 살아요~

3
Leave a Reply

avatar
2 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
김경민핑계정성호 Recent comment authors
newest oldest most voted
정성호
Guest
정성호

좋은내용 감사드립니다. 그런데 한가지 여쭤볼게 있는데요,
선택을 하게 되면 선택된 li태그가 selected 클래스가 부여되면서 맨 위로 올라가게 되는데 그 순서가
원래 순서가 아닌 선택된 순서대로 재 정렬이 되는군요.
selected 클래스를 제외한 다른 항목들은 원래 순서대로 정렬이 되게 하려면 어떻게 해야 하는지 혹시 아시나요?

김경민
Guest
김경민

최곤데요!!!