Hapus gaya lengkap tombol / kirim HTML

Apakah ada cara untuk sepenuhnya menghapus gaya tombol di Internet Explorer? Saya menggunakan sprite css untuk tombol saya, dan semuanya terlihat baik-baik saja.

Tetapi ketika saya mengklik tombolnya, tombol itu bergerak sedikit ke atas, membuatnya terlihat tidak berbentuk. Apakah ada status klik css, atau mousedown? Saya tidak tahu apa yang memicu keadaan itu.

Saya tahu ini bukan masalah besar, tetapi terkadang hal-hal kecil yang penting.

Saya berasumsi bahwa ketika Anda mengatakan ' klik tombol, itu bergerak ke atas sedikit ' Anda sedang berbicara tentang status klik bawah mouse untuk tombol, dan ketika Anda melepaskan klik mouse, itu kembali ke keadaan normal ? Dan Anda menonaktifkan rendering default tombol dengan menggunakan:

input, button, submit { border:none; } 

Jika begitu..

Secara pribadi, saya telah menemukan bahwa Anda tidak dapat benar-benar menghentikan / menimpa / menonaktifkan tindakan asli IE ini, yang membuat saya sedikit mengubah markup saya untuk memungkinkan gerakan ini dan tidak memengaruhi tampilan keseluruhan tombol untuk berbagai status.

Ini mark-up terakhir saya:

<span class="your-button-class">
    <span>
        <input type="Submit" value="View Person">
    </span>
</span>

Saya pikir ini memberikan pendekatan yang lebih menyeluruh:

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

<button>Example</button>

Pertanyaan Anda mengatakan "Internet Explorer", tetapi bagi mereka yang tertarik dengan browser lain, Anda sekarang dapat menggunakan all: unsettombol untuk menghilangkan gaya mereka.

Ini tidak berfungsi di IE atau Edge 18, tetapi didukung dengan baik di tempat lain.

https://caniuse.com/#feat=css-all

Peringatan warna Safari: Mengatur teks colortombol setelah digunakan all: unsetbisa gagal di Safari 13.1, karena bug di WebKit . (Bug akan diperbaiki di Safari 14 dan yang lebih baru.) " all: unsetDisetel -webkit-text-fill-colorke hitam, dan itu menggantikan warna." Jika Anda perlu menyetel teks colorsetelah menggunakan all: unset, pastikan untuk menyetel colordan -webkit-text-fill-colorke warna yang sama.

Peringatan aksesibilitas: Demi pengguna yang tidak menggunakan penunjuk mouse, pastikan untuk menambahkan kembali beberapa :focusgaya, misalnya button:focus { outline: orange auto 5px }untuk aksesibilitas keyboard .

Dan jangan lupa cursor: pointer. all: unsetmenghapus semua gaya, termasuk cursor: pointer, yang membuat kursor mouse Anda terlihat seperti tangan yang menunjuk saat Anda mengarahkan kursor ke tombol. Anda hampir pasti ingin mengembalikannya.

button {
  all: unset;
  color: blue;
  -webkit-text-fill-color: blue;
  cursor: pointer;
}

button:focus {
  outline: orange 5px auto;
}

<button>check it out</button>

Coba hapus perbatasan dari tombol Anda:

input, button, submit
{
  border:none;
}

Di bootstrap 4 paling mudah. Anda dapat menggunakan kelas: bg-transparentdanborder-0

Saya pikir itu adalah tombol status "aktif".

Tambahkan gaya sederhana ke tombol Anda

.btn {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}