programing

특정 입력에서 IE10의 "필드 지우기" X 버튼을 제거하시겠습니까?

i4 2023. 6. 15. 21:35
반응형

특정 입력에서 IE10의 "필드 지우기" X 버튼을 제거하시겠습니까?

물론 유용한 기능이지만 사용하지 않을 수 있는 방법이 있습니까?
예를 들어 양식이 단일 텍스트 필드이고 이미 옆에 "지우기" 단추가 있는 경우 X도 필요하지 않습니다.이런 상황에서는 그것을 제거하는 것이 좋을 것입니다.

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

상자에 대한 유사 요소 스타일 지정:

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

나는 그것을 설정하는 것이 더 낫다는 것을 발견했습니다.width그리고.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 버튼으로 필드가 지워진 경우 "변경 시" 이벤트를 처리하고 백업 저장소를 지우는 것이 해결책이었습니다.

화살표를 숨기고 "시간" 입력으로 교차하려면:

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

언급URL : https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs

반응형