Hapus gaya lengkap tombol / kirim HTML


98

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.

Jawaban:


74

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>


135

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>


2
Saya tidak berpikir latar belakang memiliki 'tidak ada' - dan! Yang penting tidak baik.
sheriffderek

4
Biasanya, saat Anda melakukan ini, Anda ingin mengganti gaya yang ada untuk sebuah tombol. Sangat jarang Anda ingin melakukan ini dengan HTML yang bersih dan tidak bergaya, karenanya digunakan !important. Yang mengatakan saya telah menghapusnya karena itu keputusan situasi. background: nonesepenuhnya valid: stackoverflow.com/questions/20784292/…
Kevin Leary

Untuk masing-masing tentang! Penting. Saya tidak berpikir saya bisa mengerjakan proyek di mana saya dipaksa untuk menggunakannya. RE: 'none' Berikut referensi yang lebih baik daripada posting SO. Saat Anda menggunakan 'background' dengan sendirinya, Anda benar-benar menggunakan singkatan dan clobbering semua atribut.
sheriffderek

Saya membuat diri saya gila karena perbedaan antara menata gambar dan beberapa teks di dalam tombol dan membuatnya terlihat sama seperti di luar <button/>... dalam kasus saya, font: inherit;berhasil. Terima kasih!
Kate

3
Saya pikir untuk tujuan aksesibilitas Anda mungkin ingin meninggalkan garis besar itu di sana. jika tidak, saat Anda membukanya, tidak ada petunjuk visual di mana Anda berada. jawaban yang bagus!
John Hooper

45

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>


1
Terima kasih untuk ini!
Will Ediger

Ini tidak disarankan untuk alasan aksesibilitas. Anda harus menambahkan kembali semua outlinegaya untuk status :focuselemen, misalnya.
Devin

@Devin Poin yang bagus! Saya memperbarui posting saya dengan saran untuk menambahkan kembali outlinegaya. (Tapi saya rasa tidak ada hal lain yang perlu kita tambahkan kembali untuk tujuan a11y. Apakah Anda tahu tentang sesuatu?)
Dan Fabulich

8

Coba hapus perbatasan dari tombol Anda:

input, button, submit
{
  border:none;
}

4

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


+ shadow-noneuntuk saya dan itu sudah cukup. Terima kasih!
Bachet

0

Saya pikir itu adalah tombol status "aktif".


Ini harus dalam keadaan aktif, Anda benar +1 untuk itu. Tetapi saya tidak membuatnya berfungsi dengan baik
Saif Bechan

"Saya pikir" bukanlah jawaban.
shinzou

0

Tambahkan gaya sederhana ke tombol Anda

.btn {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.