ลบรูปแบบทั้งหมดของปุ่ม HTML / ส่ง

มีวิธีลบสไตล์ของปุ่มใน Internet Explorer โดยสิ้นเชิงหรือไม่? ฉันใช้สไปรต์ css สำหรับปุ่มของฉันและทุกอย่างก็ดูโอเค

แต่พอคลิกปุ่มมันจะเลื่อนไปด้านบนเล็กน้อยมันทำให้ดูไม่เป็นทรง มีสถานะการคลิก CSS หรือถูกเลื่อนลงหรือไม่? ฉันไม่รู้ว่าอะไรเป็นตัวกระตุ้นสถานะนั้น

ฉันรู้ว่ามันไม่ใช่เรื่องใหญ่ แต่บางครั้งมันก็เป็นเรื่องเล็ก ๆ ที่สำคัญ

ฉันสมมติว่าเมื่อคุณพูดว่า ' คลิกปุ่มมันจะเลื่อนไปด้านบนเล็กน้อย ' คุณกำลังพูดถึงสถานะการคลิกเมาส์ลงของปุ่มและเมื่อคุณปล่อยคลิกเมาส์มันจะกลับสู่สถานะปกติ เหรอ? และคุณกำลังปิดใช้งานการแสดงผลเริ่มต้นของปุ่มโดยใช้:

input, button, submit { border:none; } 

ถ้าอย่างนั้น ..

โดยส่วนตัวแล้วฉันพบว่าคุณไม่สามารถหยุด / แทนที่ / ปิดการใช้งานการกระทำเนทีฟของ IE นี้ได้ซึ่งทำให้ฉันต้องเปลี่ยนมาร์กอัปเล็กน้อยเพื่อให้สามารถเคลื่อนไหวได้และไม่ส่งผลกระทบต่อรูปลักษณ์โดยรวมของปุ่มสำหรับสถานะต่างๆ

นี่คือการมาร์กอัปขั้นสุดท้ายของฉัน:

<span class="your-button-class">
    <span>
        <input type="Submit" value="View Person">
    </span>
</span>

ฉันคิดว่านี่เป็นแนวทางที่ละเอียดกว่า:

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

<button>Example</button>

คำถามของคุณระบุว่า "Internet Explorer" แต่สำหรับผู้ที่สนใจในเบราว์เซอร์อื่นคุณสามารถใช้ได้แล้ว all: unsetปุ่มเพื่อเลิกใช้งานได้

ไม่ทำงานใน IE หรือ Edge 18 แต่ได้รับการสนับสนุนอย่างดีในทุกที่

https://caniuse.com/#feat=css-all

ซาฟารีสีเตือน:การตั้งค่าข้อความcolorของปุ่มหลังจากใช้all: unsetสามารถล้มเหลวใน Safari 13.1 เนื่องจากข้อผิดพลาดในเป็น WebKit (ข้อบกพร่องจะได้รับการแก้ไขใน Safari 14 ขึ้นไป) " all: unsetกำลังตั้งค่า-webkit-text-fill-colorเป็นสีดำและจะแทนที่สี" หากคุณต้องการตั้งค่าข้อความcolorหลังจากใช้all: unsetงานให้แน่ใจว่าได้ตั้งค่าทั้งสองcolorและ-webkit-text-fill-colorสีให้เป็นสีเดียวกัน

คำเตือนการเข้าถึง:เพื่อประโยชน์ของผู้ใช้ที่ไม่ได้ใช้ตัวชี้เมาส์ให้แน่ใจว่าได้ใหม่เพิ่มบาง:focusจัดแต่งทรงผมเช่นbutton:focus { outline: orange auto 5px }สำหรับการเข้าถึงแป้นพิมพ์

และอย่าลืมcursor: pointer. all: unsetลบสไตล์ทั้งหมดรวมถึงcursor: pointerซึ่งทำให้เคอร์เซอร์ของเมาส์ดูเหมือนมือชี้เมื่อคุณวางเมาส์เหนือปุ่ม คุณเกือบจะต้องการนำสิ่งนั้นกลับมา

button {
  all: unset;
  color: blue;
  -webkit-text-fill-color: blue;
  cursor: pointer;
}

button:focus {
  outline: orange 5px auto;
}

<button>check it out</button>

ลองลบเส้นขอบออกจากปุ่มของคุณ:

input, button, submit
{
  border:none;
}

ใน bootstrap 4 นั้นง่ายที่สุด คุณสามารถใช้คลาส: bg-transparentและborder-0

ฉันคิดว่าปุ่มนี้เป็นสถานะ "ใช้งานอยู่"

เพิ่มสไตล์ที่เรียบง่ายให้กับปุ่มของคุณ

.btn {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}