IE에서 input 태그안에 있는 clear button 지우는 법

익스플로러(IE)에서 input 태그의 text 속성을 가지는 입력폼을 사용하는 경우 구현된 UI의 추우측에서는 자동으로 X버튼이 생성됩니다. 이 X버튼은 텍스트를 모두 삭제하는 버튼으로 이버튼을 제거하거나 스타일을 변경하는 방법을 알아보고자 합니다. 어떻게해야할까요?

# IE에서 input 태그 스타일 변경하기

이를 컨트롤 하기 위해서는 의사선택자(pseudo selector)를 사용해야 합니다. 이때 아래와 같이 해당 엘리먼트를 선택하여 사용할 수 있습니다.

input::-ms-clear { }


그렇다면 만약 입력폼에서 실제로 어떻게 사용되는지 간단한 예제를 사용해보겠습니다.

! IE에 적용하는 input 태그 스타일 예제보기

만약 아래와 같이 검색어를 입력받는 폼이 있는 경우 아래와 같이 사용합니다.

이제 위 input 태그에 보여지게될 x 버튼을 제거하기 위해 아래와 같이 css를 사용합니다.
@ ie-input.css

@ 참고하기
:: 콜론 두개를 사용한 의사선택자를 사용하는 것보다 아래와 같이 : 콜론 하나를 사용하는 것이 호환성 측면에서 더 우수합니다. 이 방법은 구 IE를 지원할 수 있습니다.

다만 위와 같이 콜론을 하나만 사용하는 것이 최근에는 큰 의미가 없습니다. 현재는 IE 8 이하의 구버전을 사용하는 경우 거의 없기 때문입니다. 대부분 ::를 공통 사용되고 있습니다.