Hapus tombol X “bidang kosong” IE10 pada input tertentu?

742

Ini adalah fitur yang bermanfaat, tentu saja, tetapi apakah ada cara untuk menonaktifkannya?
Misalnya, jika formulir adalah bidang teks tunggal dan sudah memiliki tombol "jelas" di sampingnya, terlalu berlebihan untuk memiliki X. Dalam situasi ini, akan lebih baik untuk menghapusnya.

Bisakah itu dilakukan, dan jika demikian, bagaimana?

css internet-explorer-10 Niet the Dark Absol
sumber
1
Ini juga berguna pada bidang dengan nilai default di mana kosong tidak masuk akal, misalnya kuantitas.
Joe Flynn
4
karena ini tidak memicu input pengetikan, ini sangat sulit ketika Anda mengikat acara javascript.
Kiwy

Jawaban:

1267

Gaya ::-ms-clearelemen pseudo- untuk kotak:

.someinput::-ms-clear {
    display: none;
}
Ry-
sumber
14
Ini lucu jika Anda menggunakan mode kompatibilitas IE untuk membuat halaman Anda dengan mesin sebelum IE10, elemen pseudo ini tidak berfungsi dan itu tetap menunjukkan tombol.
Yousef Salimpour
@Yousef: Ya, begitulah cara kerjanya dan bagian dari alasan mengapa Anda tidak boleh menggunakan Mode Kompatibilitas di situs web yang sebenarnya. Ini sebenarnya tidak kompatibel :)
Ry-
@minitech - IE9 pada mesin Windows 7
ManJan
3
Kontrol ini HANYA muncul di IE10 + pada Win8. Kuncinya adalah bahwa itu masih muncul ketika dokumen dimasukkan ke dalam mode kompatibilitas.
EricLaw
48
@ EricLaw: Ya, TIDAK HANYA di Win8. Saya menggunakan Windows 7 sekarang dan saya bisa melihat tombol-tombol X di IE10 saya. Jadi Anda mungkin mengatakan itu adalah fitur hanya IE10 + (meskipun tidak yakin tentang IE9), tapi pasti BUKAN Win8 saja, karena ini muncul dalam versi Win7 dari IE10. Bagaimanapun, terima kasih atas tipnya, @minitech!
OMA
272

Saya menemukan lebih baik untuk mengatur widthdan heightuntuk 0px. Jika tidak, IE10 mengabaikan padding yang didefinisikan pada bidang - padding-right- yang dimaksudkan untuk menjaga teks agar tidak mengetik di atas ikon 'X' yang saya overlay pada bidang input. Saya menduga bahwa IE10 secara internal menerapkan padding-rightinput ke ::--ms-clearelemen pseudo, dan menyembunyikan elemen pseudo tidak mengembalikan padding-rightnilai ke input.

Ini bekerja lebih baik untuk saya:

.someinput::-ms-clear {
  width : 0;
  height: 0;
}
sederhana sekali
sumber
3
Berikut adalah jsFiddle yang menggambarkan solusi ini: jsfiddle.net/zoldello/S5YRj
Phil
106

Saya akan menerapkan aturan ini untuk semua bidang input tipe teks, sehingga tidak perlu diduplikasi nanti:

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

Seseorang bahkan dapat kurang spesifik dengan hanya menggunakan:

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

Saya telah menggunakan yang belakangan bahkan sebelum menambahkan jawaban ini, tetapi berpikir bahwa kebanyakan orang lebih suka lebih spesifik daripada itu. Kedua solusi bekerja dengan baik.

Wallace Sidhrée
sumber
Terima kasih, itu berhasil untuk saya.
Sooraj Jose
76

Anda harus menata untuk ::-ms-clear( http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx ):

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

Dan Anda juga gaya untuk ::-ms-revealelemen semu untuk bidang kata sandi:

::-ms-reveal {
   display: none;
}
ducdhm
sumber
6
Catatan - pikirkan apakah Anda dapat membuatnya ::-ms-reveal elemen berfungsi sebelum menghapusnya! (Atau jika Anda memberikan tombol ini untuk semua orang, seperti penanya yang asli.) Beberapa benar-benar menggunakannya.
Ry-
3
@ minitech - kedengarannya bagus. Bisakah Anda memberi tahu kami cara membuatnya bekerja dengan pengikatan Javascript pada acara masukan? Itu tidak mengangkat suatu acara sehingga hampir mustahil untuk bekerja dengannya.
DarrellNorton
11

Saya pikir perlu dicatat bahwa semua solusi berbasis gaya dan CSS tidak berfungsi ketika halaman berjalan dalam mode kompatibilitas. Renderer mode kompatibilitas mengabaikan elemen :: - ms-clear, meskipun browser menunjukkan x.

Jika halaman Anda perlu dijalankan dalam mode kompatibilitas, Anda mungkin terjebak dengan X menunjukkan.

Dalam kasus saya, saya bekerja dengan beberapa kontrol data terikat pihak ketiga, dan solusi kami adalah untuk menangani acara "onchange" dan menghapus toko dukungan jika bidang dibersihkan dengan tombol x.

TomXP411
sumber
0

Untuk menyembunyikan panah dan memotong input "waktu":

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