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.