본문 바로가기

JavaScript/공부공부

[JS / jQuery] 커스텀 select-option 디자인

기본 select - option 태그 사용 시, option 박스 디자인 수정은 불가.

커스텀 select-option 활용해서 년/월/일 전송 form 만들어봄. 
디자인 적용한 select(div), option(ul-li)을 별도로 생성하고,  
선택한 option값이 실제 select의 value값으로 적용되도록 스크립트로 동기화 시켜주면 된다. 

대략적으로 아래같은 느낌이다!

관련 html, css, js코드

 


 

(참고)

https://selinak.tistory.com/64

 

[javascript] 커스텀 스타일링 SELECT 박스 만들기

HTML, CSS를 수정해서 셀렉트박스를 꾸밀 수도 있지만 한계가 있다. select 태그 자체를 꾸민다해도 option 박스는 기본 디자인에서 크게 벗어나지 못하며, 모바일에서는 폰 자체 UI가 적용되기때문이

selinak.tistory.com

 

'JavaScript > 공부공부' 카테고리의 다른 글

[JS / jQuery] 동적 요소 이벤트 바인딩  (0) 2025.07.24
[JS] URL 객체  (0) 2025.07.15
[JS] event.currentTarget vs event.target  (0) 2025.02.27
[JS] Form & Checkbox  (2) 2024.11.06
[JS] Property vs Attribute  (0) 2024.11.06