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

Odpowiedzi:

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