IE9 에서 Table 내부의 input에 box-shadow CSS가 적용되지 않는 증상을 발견했습니다.
원인은 table에 border-collapse: collapse;라는 속성이 있었는데, 이것은 흔히 CSS초기화 코드에서 볼 수 있습니다.
border-collapse: collapse; 삭제 또는 해당 input에 border-collapse: separate; 속성을 주는 방법이 있습니다.
input {
box-shadow: 0px 0px 5px #3699FF;
border-collapse: separate;
}
여기서 포인트는 border-collapse입니다.
collapse는 테이블의 경계를 붙이고, separate는 붙어있는 경계선을 떨어트리는 역활을 하는데,
적용 후 아래와 같이 원하는 모습을 확인할 수 있었습니다.
(아래는 input:focus 에 속성을 주어 마우스 포커스가 위치할때 나옵니다. )
