IE11 CSS 선택자 :readonly 작동되지 않는 오류 해결법 (크로스브라우징)

 

 

갑작스럽게 배정된 업무 관리자 페이지에서 처음으로 해결해야 할 오류는 IE11 CSS에서 선택자 :readonly 가 작동되지 않아 적용되어야 할 스타일이 disabled 스타일과 똑같이 나와서 해결해야 했습니다. 말도 많고 탈도 많은 IE11에서는 안되는 것들이 참 많습니다. 지금 생각해봐도 이상한 점은 :disabled를 적용이 되었는데 왜 :readonly 만 적용이 안되었을까 하는 점입니다. 가장 최신 IE11에서 CSS 기본적인 선택자가 작동하지 않는다는 사실이 잘 받아 들 여지 않았지만 검색을 해보니 다른 이들도 겪고 있는 오류였고 그렇게 알아보고 도움을 받은 결과 어찌어찌하여 해결이 된 오류입니다. 

 

제가 시도해 보았던 방법은 두가지가 있습니다. 

 

 

첫 번째는 class를 직접 만들어서 선택자로 스타일을 입히는 대신에 직접 태그에 class를 넣어주는 것입니다. 

 

css ▼

.read-only {
    background-color: rgba(0, 0, 0, .1);
    color: rgba(0, 0, 0, .4);
    border-color: rgba(0, 0, 0, .2);
}

<input type="text" class="read-only" readonly />
<textarea cols="30" rows="5" readonly> 읽기전용입니다. </textarea>

 

이렇게만 해도 input에 만들어 놓은. read-only class의 스타일이 들어가게 되지만 적용해야 할 input의 개수가 수없이 많은 상황일 경우 일일이 class를 다 넣기 어려울 수 있습니다. 저는 이미 만들어진 페이지들에 적용이 되어야 했으므로 일일이 태그에 class를 넣어줘야 하는 것은 좋은 방법이 아니었습니다.  때문에 아래와 같은 jQuery를 사용하면 readonly 속성을 가지고 있는 모든 input에 readonly class가 붙게 됩니다.  'addClass'를 사용해서 read-only class가 자동으로 붙게 됩니다.  급할 때 가끔 사용할 수도 있을 것 같습니다.

 

jQuery ▼

$('input[readonly], textarea[readonly]').each(
    function(){
        $(this).addClass('read-only');
    }
);

input[readonly='readonly'],
textarea[readonly='readonly'] {
    background-color: rgba(0, 0, 0, .1);
    color: rgba(0, 0, 0, .4);
    border-color: rgba(0, 0, 0, .2);
}