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

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

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

답변

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

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

답변

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

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

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

답변

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

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

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

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

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

답변

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

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

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

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

답변

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

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

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

답변

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

#inputId::-webkit-outer-spin-button,
#inputId::-webkit-inner-spin-button,
#inputId::-webkit-clear-button{
    -webkit-appearance: none;
    margin: 0;
}