특정 입력에서 IE10의 "clear field"X 버튼을 제거 하시겠습니까?


742

유용한 기능이지만 확실하게 비활성화 할 수있는 방법이 있습니까?
예를 들어, 양식이 단일 텍스트 필드이고 그 옆에 이미 "clear"단추가있는 경우 X도 필요하지 않습니다.이 경우에는 제거하는 것이 좋습니다.

그렇게 할 수 있습니까? 그렇다면 어떻게합니까?


1
이는 수량과 같이 공백이 의미가없는 기본값을 가진 필드에서도 유용합니다.
Joe Flynn

4
이것은 입력 타이핑을 트리거하지 않기 때문에 자바 스크립트 이벤트를 바인딩 할 때 매우 까다 롭습니다.
Kiwy

답변:


1267

상자 의 ::-ms-clear유사 요소의 스타일을 지정하십시오 .

.someinput::-ms-clear {
    display: none;
}

14
IE 호환 모드를 사용하여 IE10 이전의 엔진으로 페이지를 렌더링하면이 의사 요소가 작동하지 않으며 어쨌든 버튼이 표시됩니다.
Yousef Salimpour

@Yousef : 예, 그것이 작동하는 방식이며 실제 웹 사이트에서 호환성 모드를 사용하지 않아야하는 이유의 일부입니다. 실제로 호환되지 않습니다 :)
Ry-

@minitech-Windows 7 컴퓨터의 IE9
ManJan

3
이 컨트롤은 Win8의 IE10 +에만 나타납니다. 트릭은 문서가 호환 모드에 놓여질 때 여전히 나타납니다.
EricLaw

48
@EricLaw : 글쎄, Win8에서만. 지금 Windows 7을 사용하고 있으며 IE10에서 X 버튼을 볼 수 있습니다. 따라서 IE10 + 전용 기능 (IE9에 대해서는 확실하지 않지만)이라고 말할 수도 있지만 IE8의 Win7 버전에 나타나기 때문에 Win8에만 해당되지는 않습니다. 어쨌든 팁을 주셔서 감사합니다, @minitech!
OMA

272

widthand height를 설정하는 것이 좋습니다 0px. 그렇지 않으면 IE10은 필드에 정의 된 패딩을 무시합니다 padding-right. 입력 필드에 오버레이 된 'X'아이콘 위에 텍스트가 입력되는 것을 막기위한 것입니다. IE10이 내부적으로 padding-right입력 ::--ms-clear요소를 의사 요소에 적용하고 의사 요소를 숨겨도 padding-right값이에 복원되지 않는다고 생각합니다 input.

이것은 나를 위해 더 잘 작동했습니다.

.someinput::-ms-clear {
  width : 0;
  height: 0;
}

3
이 해결 방법을 보여주는 jsFiddle이 있습니다. jsfiddle.net/zoldello/S5YRj
Phil

106

이 규칙을 텍스트 유형의 모든 입력 필드에 적용하므로 나중에 복제 할 필요가 없습니다.

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

다음을 사용하여 덜 구체적으로 만들 수도 있습니다.

::-ms-clear { display: none; }

나는이 답변을 추가하기 전에 나중에 사용했지만 대부분의 사람들은 그보다 더 구체적인 것을 선호한다고 생각했습니다. 두 솔루션 모두 잘 작동합니다.


고마워, 그것은 나를 위해 일했다.
Sooraj Jose

76

::-ms-clear( http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx )의 스타일을 지정해야합니다 .

::-ms-clear {
   display: none;
}

그리고 ::-ms-reveal비밀번호 필드의 의사 요소 스타일도 지정하십시오 .

::-ms-reveal {
   display: none;
}

6
참고 – ::-ms-reveal요소를 제거하기 전에 요소를 작동 시킬 수 있는지 생각 하십시오! (또는 원래의 asker와 같이 모든 사람에게이 버튼을 제공하는 경우) 일부는 실제로이 버튼을 사용합니다.
Ry-

3
@minitech-그거 좋네요. 입력 이벤트에서 Javascript 바인딩으로 작동시키는 방법을 알려주시겠습니까? 이벤트를 일으키지 않으므로 작업하기가 거의 불가능합니다.
DarrellNorton

11

페이지가 호환 모드에서 실행될 때 모든 스타일 및 CSS 기반 솔루션이 작동하지 않는다는 점에 주목할 가치가 있다고 생각합니다. 브라우저가 x를 표시하더라도 호환성 모드 렌더러는 ::-ms-clear 요소를 무시합니다.

페이지가 호환 모드에서 실행되어야하는 경우 X가 표시 될 수 있습니다.

필자의 경우 일부 타사 데이터 바운드 컨트롤을 사용하고 있으며 x 버튼으로 필드를 지우면 "onchange"이벤트를 처리하고 백업 저장소를 지우는 것이 해결책이었습니다.


0

"시간"입력에서 화살표를 숨기고 교차 시키려면 :

#inputId::-webkit-outer-spin-button,
#inputId::-webkit-inner-spin-button,
#inputId::-webkit-clear-button{
    -webkit-appearance: none;
    margin: 0;
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.