[css] IE에서 Input 태그안에 있는 Clear Button 지우는 법 [펌]

[css] IE에서 Input 태그안에 있는 Clear Button 지우는 법 [펌]

 

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


# IE에서 input 태그 스타일 변경하기
이를 컨트롤 하기 위해서는 의사선택자(pseudo selector)를 사용해야 합니다. 이때 아래와 같이 해당 엘리먼트를 선택하여 사용할 수 있습니다.

input::-ms-clear { }


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


! IE에 적용하는 input 태그 스타일 예제보기만약 아래와 같이 검색어를 입력받는 폼이 있는 경우 아래와 같이 사용합니다.

<span>이름을 입력하세요.</span>
<input type="text" />
<button>Enter<button>

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

input[type=text]::-ms-clear {
  display:none;
}

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

input[type=text]:-ms-clear {
}

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

 

 

출처 : https://webisfree.com/2015-08-11/ie%EC%97%90%EC%84%9C-input-%ED%83%9C%EA%B7%B8%EC%95%88%EC%97%90-%EC%9E%88%EB%8A%94-clear-button-%EC%A7%80%EC%9A%B0%EB%8A%94-%EB%B2%95