วิธีการลบ Outline Border จากปุ่ม Input

เมื่อคลิกที่อื่นเส้นขอบจะหายไปพยายามไม่โฟกัส แต่ไม่ได้ช่วยทำอย่างไรให้เส้นขอบปุ่มน่าเกลียดหายไปเมื่อคลิก?

input[type="button"] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
}

<input type="button" value="Example Button">

ใช้โครงร่าง: ไม่มี; เราสามารถลบเส้นขอบนั้นออกในโครเมี่ยม

<style>
input[type="button"]
{
    width:120px;
    height:60px;
    margin-left:35px;
    display:block;
    background-color:gray;
    color:white;
    border: none;
    outline:none;
}
</style>

เน้นโครงร่างใน Chrome และ FF

ลบ:

input[type="button"]{
   outline:none;
}
input[type="button"]::-moz-focus-inner {
   border: 0;
}

การสาธิต

การช่วยการเข้าถึง (A11Y)

/* Don't forget! User accessibility is important */
input[type="button"]:focus {
  /* your custom focused styles here */
}

มันใช้ได้กับฉันเพียงแค่ :)

*:focus {
    outline: 0 !important;
}

อันนี้ใช้ได้ผลสำหรับฉัน

button:focus {
    border: none;
    outline: none;
}

outlineคุณสมบัติคือสิ่งที่คุณต้องการ เป็นชวเลขสำหรับตั้งค่าคุณสมบัติต่อไปนี้ในการประกาศครั้งเดียว:

• outline-style
• outline-width
• outline-color

คุณสามารถใช้ได้outline: none;ซึ่งแนะนำไว้ในคำตอบที่ยอมรับ คุณสามารถเจาะจงได้มากขึ้นหากคุณต้องการ:

button {
    outline-style: none;
}

button:focus{outline:none !important;}

เพิ่ม!importantหากใช้ในBootstrap

ชุดทั้งสองoutlineและbox-shadowคุณสมบัติของปุ่มไปnoneและทำให้พวกเขามีความสำคัญ

input[type="button"] {
    outline: none !important;
    box-shadow: none !important;
} 

เหตุผลในการตั้งค่าให้มีความสำคัญก็คือหากคุณใช้ไลบรารี CSS หรือเฟรมเวิร์กอื่น ๆ เช่น Bootstrap ก็อาจถูกลบล้างได้

เพื่อหลีกเลี่ยงปัญหาที่เกิดขึ้นเมื่อคุณเปลี่ยนคุณสมบัติเค้าร่างบนโฟกัสคือการให้เอฟเฟกต์ภาพเมื่อผู้ใช้แท็บบนปุ่มอินพุตหรือคลิกที่มัน

ในกรณีนี้คือประเภท submit แต่คุณสามารถใช้กับ type = "button" ได้เช่นกัน

input[type="submit"]:focus {
    outline: none !important;
    background-color: rgb(208, 192, 74);
}

มันง่ายกว่าที่คุณคิด เมื่อปุ่มถูกโฟกัสให้ใช้outlineคุณสมบัติดังนี้:

button:focus {
    outline: 0 !important;
}

แต่เมื่อฉันใช้noneคุณค่ามันไม่ได้ผลสำหรับฉัน

การลบเหตุการณ์ที่สามารถเข้าถึงได้ไม่ใช่ความคิดที่ดีในการพัฒนาเว็บมาตรฐาน ไม่ว่าจะด้วยวิธีใดก็ตามหากคุณกำลังมองหาวิธีแก้ปัญหาการลบเพียงโครงร่างไม่สามารถแก้ปัญหาได้ คุณต้องลบเงาสีน้ำเงินด้วย สำหรับสถานการณ์เฉพาะให้ใช้ชื่อคลาสแยกกันเพื่อแยกสไตล์พิเศษนี้กับปุ่มของคุณ

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

ทำแบบนี้ดีกว่า

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

การลบโครงร่างเป็นฝันร้ายของการช่วยการเข้าถึง คนที่แท็บโดยใช้คีย์บอร์ดจะไม่มีทางรู้ว่าพวกเขาอยู่บนรายการอะไร

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

.no-outline {
  outline: none;
}

จากนั้นคุณสามารถสมัครชั้นเรียนนั้นได้ทุกเมื่อที่ต้องการ

รับ html ด้านล่าง:

<button class="btn-without-border"> Submit </button>

ในสไตล์ css ให้ทำดังต่อไปนี้:

.btn-without-border:focus {
    border: none;
    outline: none;
}

รหัสนี้จะลบเส้นขอบของปุ่มและจะปิดใช้งานการโฟกัสเส้นขอบของปุ่มเมื่อคลิกปุ่ม

ดังที่หลายคนกล่าวถึงselector:focus {outline: none;}จะลบเส้นขอบนั้นออกแต่เส้นขอบนั้นเป็นคุณสมบัติการช่วยการเข้าถึงที่สำคัญที่ช่วยให้ผู้ใช้แป้นพิมพ์พบปุ่มและไม่ควรนำออก

เนื่องจากความกังวลของคุณดูเหมือนจะเป็นเรื่องสวยงามคุณควรรู้ว่าคุณสามารถเปลี่ยนสีสไตล์และความกว้างของโครงร่างได้ทำให้เข้ากับสไตล์ไซต์ของคุณได้ดีขึ้น

selector:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

ชวเลข:

selector:focus {
  outline: 1px dashed red;
}