Usunąć przycisk X „wyczyść pole” IE10 na niektórych danych wejściowych?

742

Na pewno jest to przydatna funkcja, ale czy można ją wyłączyć?
Na przykład, jeśli formularz jest pojedynczym polem tekstowym, a obok niego znajduje się już przycisk „wyczyść”, zbędne jest również posiadanie X. W tej sytuacji lepiej byłoby go usunąć.

Czy można to zrobić, a jeśli tak, to w jaki sposób?

css internet-explorer-10

— Niet the Dark Absol
źródło

1

Jest to również przydatne w przypadku pola o wartości domyślnej, gdzie puste nie ma sensu, np. Ilość.

— Joe Flynn

4

ponieważ nie powoduje to wpisywania danych wejściowych, jest to bardzo trudne, gdy wiążesz zdarzenie javascript.

— Kiwy

1267

Nadaj styl ::-ms-clearpseudoelementowi dla pudełka:

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

— Ry-
źródło

14

To zabawne, jeśli używasz trybu zgodności IE do renderowania strony z silnikami wcześniejszymi niż IE10, ten pseudo element nie działa i i tak pokazuje przycisk.

— Yousef Salimpour,

@Yousef: Tak, tak to działa i dlatego nigdy nie powinieneś używać trybu zgodności w prawdziwej witrynie. W rzeczywistości nie jest kompatybilny :)

— Ry-

@minitech - Jego IE9 na komputerze z systemem Windows 7

— ManJan

3

Ta kontrolka pojawia się TYLKO w IE10 + na Win8. Sztuka polega na tym, że nadal pojawia się, gdy dokument jest wprowadzony w tryb zgodności.

— EricLaw,

48

@EricLaw: Cóż, NIE TYLKO na Win8. Używam teraz Windows 7 i widzę te przyciski X w moim IE10. Można więc powiedzieć, że jest to funkcja tylko dla IE10 + (choć nie jestem pewien co do IE9), ale zdecydowanie NIE tylko dla Win8, ponieważ pojawia się w wersji IE7 dla Win7. W każdym razie dzięki za wskazówkę, @minitech!

— OMA

272

Uważam, że lepiej jest ustawić widthi heightdo 0px. W przeciwnym razie IE10 ignoruje dopełnienie zdefiniowane w polu - padding-right- które miało na celu powstrzymanie tekstu przed pisaniem na ikonie „X”, którą nałożyłem na pole wprowadzania. Zgaduję, że IE10 wewnętrznie stosuje dane padding-rightwejściowe do ::--ms-clearpseudoelementu, a ukrywanie pseudoelementu nie przywraca padding-rightwartości do input.

To działało dla mnie lepiej:

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

— jimp
źródło

3

Oto jsFiddle ilustrujący to obejście: jsfiddle.net/zoldello/S5YRj

— Phil

106

Zastosowałbym tę regułę do wszystkich pól wejściowych typu tekst, więc nie trzeba jej później kopiować:

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

Można nawet uzyskać mniej szczegółowe, używając tylko:

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

Użyłem później nawet przed dodaniem tej odpowiedzi, ale pomyślałem, że większość ludzi wolałaby być bardziej szczegółowa. Oba rozwiązania działają dobrze.

— Wallace Sidhrée
źródło

Dzięki, zadziałało dla mnie.

— Sooraj Jose

76

Powinieneś stylizować ::-ms-clear( http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx ):

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

I styl ::-ms-revealpseudoelementem pola hasła:

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

— ducdhm
źródło

6

Uwaga - zastanów się, czy możesz uruchomić ::-ms-revealelement przed jego usunięciem! (Lub jeśli udostępniasz ten przycisk wszystkim, tak jak pierwotny pytający.) Niektórzy naprawdę go używają.

— Ry-

3

@minitech - brzmi świetnie. Czy możesz nam powiedzieć, jak sprawić, by działał z JavaScript wiązaniem zdarzeń wejściowych? Nie wywołuje zdarzenia, więc praca z nim jest prawie niemożliwa.

— DarrellNorton

11

Myślę, że warto zauważyć, że wszystkie rozwiązania oparte na stylu i CSS nie działają, gdy strona działa w trybie zgodności. Moduł renderujący tryb zgodności ignoruje element :: - ms-clear, nawet jeśli przeglądarka pokazuje x.

Jeśli Twoja strona musi działać w trybie zgodności, być może utknąłeś z wyświetlaniem X.

W moim przypadku pracuję z niektórymi kontrolkami powiązanymi z danymi stron trzecich, a naszym rozwiązaniem było obsłużyć zdarzenie „onchange” i wyczyścić zaplecze, jeśli pole zostanie wyczyszczone za pomocą przycisku x.

— TomXP411
źródło

0

Aby ukryć strzałki i przejść przez „czas”:

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

— ClemPat
źródło