셀렉트박스에 스타일 적용하기

웹에서 텍스트박스를 보면 스타일을 적용하여 이쁘게 꾸밀수 있다.
그러나 셀렉트박스는 스타일이 적용이 되지 않는다.
그러나... 셀렉트박스 역시 일반 스타일이 아닌 HTC를 사용하여 스타일을 적용할 수 있다.

예제 화면

관련자료 다운로드 :

invalid-file

 

스타일 정의

<style type="text/css">
　.selectBox { behavior:url('./selectbox.htc'); }
</style>

자바스크립트 예제

<script language="javascript" type="text/javascript">
　function ItemAdd(objname, textname, valuename)
　{
　　var obj = document.getElementById(objname);
　　obj.add(new Option(document.getElementById(textname).value,document.getElementById(valuename).value));
　　obj.reInitializeSelectBox();
　}

　function ItemChange(obj)
　{
　　alert(obj.options[obj.selectedIndex].value);
　}
</script>

태그 작성법
　* class에 스타일에 정의한 selecBox를 넣어준다.
　* 사용자 옵션 (정의하지 않으면 기본값으로 사용됨)
　　- setDisplayCount : 옵션 항목 창에 출력될 항목의 갯수를 지정 (기본값 : 10)
　　- setImage : 드롭다운 항목이 나오도록 클릭하는 화살표 이미지 지정 (기본값 : arrow_image.gif)
　　- setColor : 셀렉트 박스에서 사용되는 색상 지정
　　　사용법 : "비활성 글씨색,비활성 바탕색,활성 글씨색,활성 바탕색,비활성 테두리색,활성 테두리색"
　　　　　　　만약 1개의 색상만 넣으면 비활성 글씨색만 지정하게 된다.

<select class="selectBox" id="mySelect" onchange="ItemChange(this);" setDisplayCount="5" setImage="./arrow_image2.gif" setColor="#ff0000,#ffffff,#ffffff,#ff0000,#666666,#ff0000">
　<option value="01">테스트..01..</option>
　<option value="02">테스트..02..</option>
　<option value="03">테스트..03..</option>
　<option value="04">테스트..04..</option>
　<option value="05">테스트..05..</option>
　<option value="06">테스트..06..</option>
　<option value="07">테스트..07..</option>
</select>

작성 : 상현넘™ [SHBLITZ.NET]