Select Box Border 넣기 - ie7의 경우

Select box에 border값을 넣는 경우, 다른 브라우저는 문제가 안되지만, ie7의 경우 border 값이 먹지 않습니다.


상기의 select box의 경우 ie7의 경우, border값이 안먹죠.
border 값을 설정하려면 어떻게 할까요? 방법이 없을까요? 이전에 ie6에서도 border가 안먹은 것을 생각됩니다.

해결책 1

한가지 생각은 이런겁니다. selelct box를 span태그로 감싸고 span요소에 border 값을 주는건 어떨까요?
하나의 대안이 될 수 있습니다. 한번 해볼까요?


ie7에도 당연히 border값이 먹겠죠. 이거 괜찮아 보입니다. 딱히 어색해 보이지도 않아요.

ie9의 경우 하단에 여백이 좀 남네요. 그래서 height값을 약간 조정해 봤습니다. 그러니 딱 맞네요. height:1.5em ^^;

해결책 2

만약에 프로젝트 중간에 변경사항이라고 하면 전 페이지를 일괄 변경하려면????
스크립트를 한번 이용해 볼까 합니다.

작전은 이렇습니다. jQuery를 이용해서 select를 span 태그로 감싸버리는 겁니다. 물론 span에 class를 적용하는 거죠.


							$(function(){
								var btnWrap = document.getElementById("btnexec01");
								var flag = true;
								btnWrap.onclick = function () {
									if (flag) {
										selectWrapper();
										flag = false;
									}
								}
								function selectWrapper () {
									var divTest = $(".div_test");
									var targetSelect = divTest.find("select");
									targetSelect.wrap("<span class='slt_wrap'></span>")
								}
							});							
						

span을 감싸는 경우를 ie7 경우만 이용하는 것도 하나의 방법이겠습니다. jQuery의 브라우저 탐지 방법을 사용하면 되겠네요.
한 번 시도해 볼께요.

							$(function(){
								var btnWrap2 = document.getElementById("btnexec02");
								var flag = true;
								btnWrap2.onclick = function () {
									if ($.browser.msie && $.browser.version < 8 && flag) {
										selectWrapper();
										flag = false;
									}
								}
								function selectWrapper () {
									var divTest = $(".div_test");
									var targetSelect = divTest.find("select");
									targetSelect.wrap("<span class='slt_wrap'></span>")
								}
							});							
						

해결책 3

웹 서핑을 하는 중에 외국의 어느 분이 올려 놓은 해결책을 우연히 보게 됐습니다.
ie 전용 filter 를 사용하는 겁니다. border를 넣는게 아니라 dropshadow로 border값을 위장하는 방법이더군요.
아래의 css 소스를 한번 보시죠.

							filter: 
							progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-2,color=#222222)
							progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=0,color=#222222) 
							progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=2,color=#222222) 
							progid:DXImageTransform.Microsoft.dropshadow(OffX=-2, OffY=0,color=#222222); 						
						

신기하죠 ^^; 이걸 사용하려면 ie7 핵을 사용하거나, 조건부 주석 css를 사용하거나 아니면 jQuery를 이용하는 방법을 생각해 볼 수 있습니다.
스크립트를 이용하면 시간 지연 등의 불이익이 생기겠지만, 어쨌든 해결책이 될 수 있을거 같아요.

							/* IE7 hack을 이용하는 방법 */
							*+html .slt_style {
								filter: 
								progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-2,color=#222222)
								progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=0,color=#222222) 
								progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=2,color=#222222) 
								progid:DXImageTransform.Microsoft.dropshadow(OffX=-2, OffY=0,color=#222222); 
							}					
						

							/* jQuery를 이용하는 방법	*/
							$(function(){
								if ($.browser.msie && $.browser.version < 8) {
									$("select").css({
										"filter":"progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-2,color=#222222) progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=0,color=#222222) progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=2,color=#222222) progid:DXImageTransform.Microsoft.dropshadow(OffX=-2, OffY=0,color=#222222)"
									});					
								}
							});