728x90 반응형 셀렉박스2 [javascript] 커스텀 스타일링 SELECT 박스 만들기 HTML, CSS를 수정해서 셀렉트박스를 꾸밀 수도 있지만 한계가 있다. select 태그 자체를 꾸민다해도 option 박스는 기본 디자인에서 크게 벗어나지 못하며, 모바일에서는 폰 자체 UI가 적용되기때문이다. 웹디자이너분이 넘기는 시안은 보통 커스텀 셀렉박스인데 사실 나는 코딩하는 입장에서 귀찮기때문에 웬만하면 복잡한 스타일링을 지양하고싶긴하다ㅎㅎ 아무튼 기본 UI에서 벗어나기 위해 자바스크립트를 이용해 스타일링을 해보자. 옵션값이 중복으로 들어가는 다소 귀찮은 코드이다. 그래도 모바일에서 꾸며진 모습이 깔끔해 맘에 든다. See the Pen Custom select box by sel (@wimmwell) on CodePen. 코드펜의 콘솔을 열어서 확인해보면 옵션 값을 선택할때마다 값이 찍히는.. 2023. 5. 22. [HTML] Select 박스 옵션 타이틀 항목 나타내기 셀렉트 박스에 옵션값을 입력하면 첫번째 옵션이 셀렉트박스에 노출이 된다. 예시 7일 3개월 1년 첫 옵션값 대신에 옵션들의 타이틀을 입력하고 싶은 경우 옵션에 disabled hidden selected 속성을 이용하면 된다. 옵션이 숨겨지고 선택 불가능한 상태로 활성화된다. 예시 구독 기간 7일 3개월 1년 코드 구독 기간 7일 3개월 1년 2023. 1. 2. 이전 1 다음 728x90 반응형
