Hapus perbatasan dari tombol


109

Saya mencoba membuat tombol dan memasukkan gambar saya sendiri, bukan gambar tombol standar. Namun, batas abu-abu dari tombol standar masih tetap ada, terlihat di luar gambar tombol hitam saya.

Adakah yang tahu cara menghapus batas abu-abu ini dari tombol, jadi hanya gambar itu sendiri? Terima kasih.


Coba -webkit-appearance: inherit;atau-webkit-appearance:initial
Maks

1
@ Brut: Saya mungkin salah, tapi menurut saya itu terlihat khusus browser, dan saya cukup yakin Jameson menginginkan sesuatu yang akan berfungsi untuk semua browser modern.
Michael Scheper

Jawaban:


185

Menambahkan

padding: 0;
border: none;
background: none;

ke tombol Anda.

Demo:

https://jsfiddle.net/Vestride/dkr9b/


Saya menghargai .. tetapi saya menambahkan seperti yang Anda katakan pada stylesheet dan sayangnya itu tidak berhasil. Haruskah saya menyematkannya langsung ke html, jika itu akan membuat perbedaan?
JamesonW

Saya menambahkan biola plus background: none;ke tombol. Perhatikan biola itu dan lihat apakah itu cocok untuk Anda.
Vestride

37

Ini sepertinya berhasil untuk saya dengan sempurna.

button:focus { outline: none; }

4
outline:none;tidak disarankan karena alasan aksesibilitas. Jika Anda harus menghapus batas fokus, berikan cara lain bagi pengguna untuk melihat bahwa itu memiliki fokus. outlinenone.com
Vestride

9

Saya mengalami masalah yang sama dan meskipun saya menata tombol saya di CSS, itu tidak akan pernah mengambil border:nonetetapi yang berhasil adalah menambahkan gaya langsung pada tombol input seperti:

<div style="text-align:center;">
    <input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>

Anda menggunakan cascade CSS untuk mengganti properti dengan gaya sebaris. Anda harus membaca beberapa artikel tentang cascade CSS dan spesifikasi CSS.
DrCord


1

Trik yang biasa dilakukan adalah menjadikan gambar itu sendiri bagian dari tautan, bukan tombol. Kemudian, Anda mengikat peristiwa "click" dengan penangan khusus.

Kerangka kerja seperti Jquery-UI atau Bootstrap melakukan ini di luar kotak. Menggunakan salah satunya dapat meringankan banyak konsep aplikasi secara keseluruhan.


1

Anda juga dapat mencoba background:none;border:0pxtombol.

juga selektor css div#yes button{..}dan div#no button{..}. semoga membantu


Anda juga dapat mengatur latar belakang tombol sebagai gambar, sebagai gantinya menggunakan tag img

Atau lakukan dalam css murni. sepertibackground:#555; font-weight:bold: color:#fff; padding:6px 8px;

0

Untuk menghapus 'bingkai biru' default dari tombol pada fokus tombol:

Dalam Html:

<button class="new-button">New Button...</button>

Dan di Css

button.new-button:focus {
    outline: none;
}

Semoga membantu :)



-3

$ (". myButtonClass"). css (["border: none; background-color: white; padding: 0"]);


3
Lol Anda tidak boleh menggunakan jquery untuk perubahan gaya css
zardilior
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.