จะหลีกเลี่ยงรูปแบบปุ่ม 'ชำระเงินด้วยบัตร' ของ Stripe เพื่อทำให้สับสนกับ css ของ HTML5up ได้อย่างไร

ฉันใช้หนึ่งในเทมเพลตของ html5up.net และเมื่อฉันเพิ่มปุ่ม 'ชำระเงินด้วยบัตร' แบบแถบ มันจะถูกแทนที่โดย css ของ html5up (ดู jsfiddles ทั้งสองด้านล่าง) ฉันลองอ่านไฟล์ css และดูว่ามีอะไรที่ฉันสามารถเปลี่ยนแปลงเพื่อให้ส่งผลต่อรูปลักษณ์ของปุ่มโดยไม่เกิดประโยชน์หรือไม่ (ไฟล์มีขนาดใหญ่มากและฉันสามารถใช้การควบคุมจากหัวหน้าที่มีประสบการณ์มากกว่าได้)

Jsfiddle ว่าปุ่มควรมีลักษณะอย่างไร (ไม่ได้โหลด CSS)

<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 ว่าหน้าตาเป็นอย่างไรเมื่อใช้ CSS ของ HTML5up ซึ่งเป็นโค้ดเดียวกันกับเมื่อก่อนบวกบรรทัดนี้:

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

คำถามของฉัน: มีวิธีง่ายๆ ที่ฉันสามารถยกเว้นปุ่มจาก css ที่ฉันโหลดไว้สำหรับไซต์ได้หรือไม่ ถ้าไม่คุณจะทำสิ่งนั้นให้สำเร็จได้อย่างไร? คลาสใหม่ที่มีการตั้งค่าเริ่มต้นในไฟล์ css หรือไม่?

ขอบคุณ!


person jlo    schedule 01.10.2017    source แหล่งที่มา
comment
สิ่งแรกที่คุณควรทำคือใช้ตัวตรวจสอบเว็บเบราว์เซอร์ที่คุณชื่นชอบเพื่อค้นหา CSS ที่จะนำไปใช้กับปุ่มของคุณ มันจะบอกคุณอย่างชัดเจนว่ากฎ css ใดบ้างที่ใช้และอยู่ที่ไหน   -  person jcaron    schedule 02.10.2017


คำตอบ (1)


บรรทัด 1897 ของ CSS ของคุณกำลังอธิบายสไตล์ที่ใช้กับปุ่มต่างๆ

หากคุณลบบรรทัด 1923:

height: 3.75em;

มันจะดูโอเค (หรือเพียงแค่ลบทั้งส่วนตั้งแต่ปี 1897 ถึง 2050 แล้วคุณจะสบายดี)

person adrian.krzysztofek    schedule 02.10.2017
comment
ตัวเลือกนี้ทำให้ปุ่มอื่นๆ บนเว็บของฉันสับสนเล็กน้อย แต่ด้วยคำตอบของคุณ ฉันจึงตระหนักว่าวิธีที่ดีกว่าในการแก้ไขปัญหานี้คือการเขียนสิ่งต่อไปนี้: '.stripe-button-el {height: 1em;}' ใน CSS ดังนั้นมันจะมีผลกับปุ่มของแถบเท่านั้น ขอบคุณมากสำหรับการตอบกลับของคุณ มันแสดงให้ฉันเห็นวิธีการแก้ไขปัญหานี้ ฉันรู้สึกทราบซึ้ง - person jlo; 02.10.2017