Bagaimana cara menghindari gaya tombol 'Bayar dengan kartu' Stripe agar kacau dengan css HTML5up?

Saya menggunakan salah satu templat html5up.net dan ketika saya menambahkan tombol 'Bayar dengan kartu' bergaris, itu digantikan oleh css html5up (lihat kedua jsfiddle di bawah). Saya mencoba menelusuri file css dan melihat apakah ada sesuatu yang dapat saya ubah untuk memengaruhi tampilan tombol, tetapi tidak berhasil (file tersebut sangat besar dan saya dapat menggunakan beberapa arahan dari kepala yang lebih berpengalaman).

Jsfiddle tentang tampilan tombol (tidak ada css yang dimuat)

<title>Lalala</title>
<body>
<form action="/your-server-side-code" method="POST">
<script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="a public key"
    data-amount="1000"
    data-name="Lalala"
    data-description="Widget"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png" 
    data-locale="auto"
    data-zip-code="true"
    data-currency="eur">
  </script>
</form>

</body>

Jsfiddle tampilannya dengan css HTML5up, yaitu kode yang sama seperti sebelumnya ditambah baris ini:

        <link rel="stylesheet" href="/idmain.css" />

Pertanyaan saya: Apakah ada cara sederhana agar tombol tersebut dikecualikan dari css yang telah saya muat untuk situs ini? Jika tidak, bagaimana cara Anda mencapai hal tersebut? Kelas baru yang memiliki pengaturan default di file css?

Terima kasih!


person jlo    schedule 01.10.2017    source sumber
comment
Hal pertama yang harus Anda lakukan adalah menggunakan inspektur browser web favorit Anda untuk menemukan css mana yang diterapkan pada tombol Anda. Ini akan memberi tahu Anda aturan css apa yang diterapkan dan di mana aturan tersebut berada.   -  person jcaron    schedule 02.10.2017


Jawaban (1)


Baris 1897 dari CSS Anda menjelaskan gaya yang diterapkan pada tombol.

Jika Anda menghapus baris 1923:

height: 3.75em;

Ini akan terlihat baik-baik saja (atau hapus saja seluruh bagian dari tahun 1897 hingga 2050 dan Anda akan baik-baik saja).

person adrian.krzysztofek    schedule 02.10.2017
comment
Opsi ini sedikit mengacaukan tombol lain di web saya, namun berkat jawaban Anda, saya menyadari bahwa cara yang lebih baik untuk memperbaikinya adalah dengan menulis yang berikut: '.stripe-button-el {height: 1em;}' di CSS, jadi itu hanya akan mempengaruhi tombol Stripe. Terima kasih banyak atas balasan Anda, ini menunjukkan kepada saya cara menuju solusi ini. Saya menghargainya - person jlo; 02.10.2017