225

ปุ่มของฉันมีจุดเด่นอยู่รอบ ๆ หลังจากที่ฉันคลิก นี่คือใน Chrome

ยกเลิกการเลือก

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

ฉันใช้ Bootstrap ด้วยธีม แต่ฉันค่อนข้างแน่ใจว่าไม่ใช่: ฉันกำลังสังเกตเห็นสิ่งนี้มาก่อนในโครงการอื่น

มันจะหายไปถ้าผมใช้แท็กแทน<a> <button>ทำไม? ถ้าฉันต้องการใช้<button>ฉันจะทำให้มันหายไปได้อย่างไร

html css twitter-bootstrap

— ฌอนคลาร์กเดิม
แหล่งที่มา

12

ร่าง: 0; อาจสนใจคุณ

— Wiggler Jtag

มีการเพิ่มคลาสใดหลังจากคลิกหรือไม่

— Kuzgun

1

โครงร่าง: 0 ดูเหมือนจะไม่ได้ช่วยหรือลักษณะของเว็บคิต

— Sean Clark Hess

7

28 คำตอบทั้งหมดที่แนะนำวิธีการต่าง ๆ สำหรับการแก้ไขปัญหานี้คือข้อพิสูจน์ถึงสถานะการพัฒนาเว็บส่วนหน้าในวันนี้

— deltanine

3

ผู้ที่พิจารณาถึงคุณลักษณะการช่วยการเข้าถึงนี้จะเป็นปัญหาเป็นข้อพิสูจน์ถึงสถานะการพัฒนาเว็บส่วนหน้าในวันนี้

— เควนติน

292

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

.btn:focus {
  outline: none;
  box-shadow: none;
}

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

— jerimiah797
แหล่งที่มา

33

ฉันก็คิดถึงสิ่งนี้เช่นกัน แต่การลบเค้าร่างไม่ได้มีปัญหาเรื่องการเข้าถึงหรือไม่

— silvenon

10

ฉันเดาว่าเราไม่มีทางเลือกอื่น คุณยังสามารถเพิ่ม.btn:active:focusตัวเลือกเพื่อลบออกจากสถานะการใช้งานได้เช่นกัน

— silvenon

45

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

— Murphy Randle

สำหรับนักเดินทางในอนาคตรหัสนี้จะแทนที่สไตล์ทั้งหมดในทุกปุ่มสถานะสำหรับปุ่มเริ่มต้น (ไม่ใช่ปุ่มทั้งหมด):

.btn-default, .btn-default:hover, .btn-default:active, .btn-default:active:focus, .btn-default:visited, .btn-default:focus {     color: #dcdcdc;     background-color: #232323;        outline: none; }

— Geordie

1

หากใช้ตัวแปร bootstrap ในตัวสามารถทำได้โดยการตั้ง vars ทั้งสองนี้เป็น: $ btn-focus-width: 0; $ BTN โฟกัสกล่องเงา: none;

— bullettrain

109

คุณต้องการสิ่งที่ชอบ:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

วิธีการ. blur () จะทำการลบโฟกัสที่เน้นอย่างถูกต้องและไม่ทำให้สไตล์ของ Bootstraps ยุ่งเหยิง

— cshotton
แหล่งที่มา

9

สิ่งนี้แสดงโครงร่างชั่วขณะหนึ่งซึ่งยังคง

— พังอยู่

2

ฉันไม่เห็นการสั่นไหวใด ๆ หากฉันปิดการใช้งานเหตุการณ์โฟกัสแทนการคลิกเหตุการณ์

— ชาร์ลส์

2

สิ่งนี้ยอดเยี่ยมมาก! จะมีปัญหาที่อาจเกิดขึ้นหรือไม่ถ้าฉันพยายามแนบ click () ตัวจัดการเหตุการณ์ (เช่นรหัสที่รันเมื่อคุณคลิกปุ่มดังกล่าว) ไปที่ปุ่มเดียวกัน

— Nils_e

4

หากมีใครสงสัยว่าที่นี่ทำงานใน bootstrap v4 ได้หรือไม่ คำตอบยังคงใช้ได้ในปี 2561 ไชโย!

— jreed

4

การเข้าถึงได้ - ตกลงเมื่อเทียบกับคำถามที่ได้รับคะแนนสูงสุดหรือไม่

— CharlesM

47

ความเข้าใจของฉันคือการมุ่งเน้นที่ถูกนำไปใช้ครั้งแรกหลังจากonMouseDownเหตุการณ์ดังนั้นการโทรe.preventDefault()เข้าonMouseDownอาจเป็นโซลูชั่นที่สะอาดขึ้นอยู่กับความต้องการของคุณ นี่เป็นทางออกที่เป็นมิตรกับการเข้าถึง แต่แน่นอนว่ามันจะปรับพฤติกรรมของการคลิกเมาส์ซึ่งอาจไม่เข้ากันกับโครงการเว็บของคุณ

ขณะนี้ฉันใช้โซลูชันนี้ (ภายในreact-bootstrapโครงการ) และฉันไม่ได้รับการโฟกัสหรือปุ่มโฟกัสค้างหลังจากคลิก แต่ฉันยังคงสามารถแท็บโฟกัสของฉันและมองเห็นโฟกัสของปุ่มเดียวกันได้

— ชุดนอน
แหล่งที่มา

2

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

— Galeel Bhasha

1

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

— Michael Tontchev

7

สำหรับทุกคนที่กำลังมองหาข้อมูลโค้ดนี้ควรทำงานและเก็บรักษา onClick:onMouseDown={e => e.preventDefault()}

— Adam K Dean

1

สิ่งนี้จะป้องกันแถบพื้นที่และปุ่มย้อนกลับจากการ "คลิก" ปุ่ม onKeyUp={(e) => {if (e.keyCode === 13 || e.keyCode === 32) handleClick()}บางทีอาจจะเป็นโซลูชั่นที่สมบูรณ์มากขึ้นคือการเพิ่มกลับนี้ด้วย:

— jfbloom22

คุณไม่ควรเรียก e.preventDefault () ภายในonKeyUpเหตุการณ์ ปรากฎว่าคุณทำเช่นนั้นแล้วปุ่มจะยังคงโฟกัสอยู่หลังจากกดปุ่ม space หรือปุ่ม return และ tabbing หรือคลิกที่ใดก็ได้

— jfbloom22

30

ไม่อยากเชื่อเลยว่ายังไม่มีใครโพสต์สิ่งนี้

ใช้ป้ายกำกับแทนปุ่ม

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

ซอ

— อดัม McKenna
แหล่งที่มา

11

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

— Murphy Randle

8

1. แทนที่ป้ายกำกับด้วย <a> แท็ก เพื่อให้สามารถเข้าถึงได้ผ่านทางแป้นพิมพ์ 2. เพิ่ม aria-role = "button" เพื่อปรับปรุงการเข้าถึงสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ Fiddle อัพเดทแล้ว

— Galeel Bhasha

วิธีแก้ปัญหาที่ดีช่วยฉัน แต่อย่างใดไม่ทำงานสำหรับคำสั่งเชิงมุมแม้จะมีเสื้อคลุมเช่น<a class="btn"><my-directive/></a>

— ya_dimon

2

ป้ายกำกับถูกข้ามโดยสิ้นเชิงสำหรับผู้ใช้ที่ไม่ใช่หนูเมื่อทำการแท็บไปรอบ ๆ ไม่ดีสำหรับการเข้าถึง

— Felipe Jun

1

ใน Bootstrap 4 ดูเหมือนว่าจะเปลี่ยนรูปลักษณ์ของปุ่ม

— Jason Kim

30

แม้ว่าจะง่ายเพียงแค่ลบเค้าร่างสำหรับปุ่มที่โฟกัสทั้งหมด (ตามคำตอบของผู้ใช้ 1933897 ) แต่โซลูชันนั้นไม่ดีจากมุมมองการช่วยสำหรับการเข้าถึง (ตัวอย่างเช่นดูหยุดการส่งข้อความด้วยเค้าร่างโฟกัสเริ่มต้นของเบราว์เซอร์ )

ในทางกลับกันอาจเป็นไปไม่ได้ที่จะโน้มน้าวให้เบราว์เซอร์ของคุณหยุดจัดแต่งทรงผมให้คลิกปุ่มของคุณตามที่ตั้งใจถ้ามันคิดว่ามันเน้นหลังจากที่คุณคลิกที่มัน (ฉันมองคุณ Chrome บน OS X)

ดังนั้นเราจะทำอย่างไร มีตัวเลือกสองอย่างในใจของฉัน

1) Javascript (jQuery): $('.btn').mouseup(function() { this.blur() })

คุณกำลังสั่งให้เบราว์เซอร์ของคุณลบโฟกัสรอบ ๆ ปุ่มใด ๆทันทีหลังจากคลิกปุ่ม โดยการใช้mouseupแทนที่จะเป็นclickเรากำลังรักษาพฤติกรรมเริ่มต้นสำหรับการโต้ตอบบนคีย์บอร์ด ( mouseupไม่ได้ถูกกระตุ้นโดยแป้นพิมพ์)

2) CSS: .btn:hover { outline: 0 !important }

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

— อเล็กซิส
แหล่งที่มา

4

หมายเลข 1 เป็นเคล็ดลับที่มีประโยชน์ มันจะปิดการใช้งานโฟกัสเมื่อไม่ได้กดปุ่ม แต่จะปล่อยให้มันปรากฏขึ้นในขณะที่มันกด :active:focus {outline:none;}ฉันได้มุ่งเน้นคนพิการในองค์ประกอบที่ใช้งานคลิกด้วย

— certainlyakey

ฟังก์ชั่นชวเลขที่ผูกผู้ฟังเหตุการณ์เลิกใช้ใน jQuery ดังนั้นจะดีกว่าถ้าคุณใช้.on('mouseup', function() { ... })แทน.mouseup()

— Crazy Redd

16

สิ่งนี้ใช้ได้สำหรับฉัน ฉันสร้างคลาสที่กำหนดเองซึ่งจะแทนที่ CSS ที่จำเป็น

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

-webkit-box-shadow จะทำงานกับ Chrome และเบราว์เซอร์ซาฟารี

— men_aka
แหล่งที่มา

ใช้งานได้สำหรับฉัน แต่ฉันต้องลบborder: none !important;ปุ่มเพื่อรักษาขนาดเดียวกัน

— Emeka Mbah

1

ฉันต้องการลบการเน้น onClick คำตอบข้างต้นไม่ทำงาน แต่ "box-shadow: none! important;" มันใช้งานได้สำหรับฉันขอบคุณ @Menaka

— Zaif Warm

11

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

$(this).trigger("blur");

หรือเรียกมันจากเหตุการณ์ / วิธีอื่น ...

$(".btn_name").trigger("blur");

— ปล้น
แหล่งที่มา

ปัญหานี้คือเมื่อผู้ใช้แป้นพิมพ์ "คลิก" ปุ่ม (โดยมุ่งเน้นแล้วกดพื้นที่) มันจะสูญเสียโฟกัส จากนั้นคุณต้องแท็บตลอดทางกลับไปทุกที่ที่คุณอยู่ 😡

— Tamlyn

8

หากคุณใช้กฎ:focus { outline: none; }เพื่อลบเค้าร่างลิงก์หรือตัวควบคุมจะสามารถโฟกัสได้ แต่จะไม่มีการระบุโฟกัสสำหรับผู้ใช้คีย์บอร์ด วิธีการลบมันด้วย JS like onfocus="blur()"นั้นแย่กว่าและจะส่งผลให้ผู้ใช้คีย์บอร์ดไม่สามารถโต้ตอบกับส่วนควบคุมได้

แฮ็กที่คุณสามารถใช้ได้ซึ่งรวมถึงตกลงเพิ่ม:focus { outline: none; }กฎเมื่อผู้ใช้โต้ตอบกับเมาส์และลบออกอีกครั้งหากตรวจพบการโต้ตอบของแป้นพิมพ์ Lindsay Evansได้สร้าง lib สำหรับสิ่งนี้: https://github.com/lindsayevans/outline.js

แต่ฉันต้องการตั้งคลาสบน html หรือ body tag และมีการควบคุมในไฟล์ CSS ว่าจะใช้เมื่อใด

ตัวอย่างเช่น (ตัวจัดการเหตุการณ์แบบอินไลน์ใช้เพื่อการสาธิตเท่านั้น):

<html>
<head>
<style>
  a:focus, button:focus {
    outline: 3px solid #000;
  }
  .no-focus a, .no-focus button {
    outline: none;
  } 
</style>
</head>
<body id="thebody" 
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
    <p>This her is <a href="#">a link</a></p>   
    <button>Click me</button>
</body>
</html>

ฉันวางปากกาไว้ที่: http://codepen.io/snobojohan/pen/RWXXmp

แต่ระวังมีปัญหาด้านประสิทธิภาพ สิ่งนี้บังคับให้วาดใหม่ทุกครั้งที่ผู้ใช้สลับระหว่างเมาส์และคีย์บอร์ด เพิ่มเติมเกี่ยวกับการหลีกเลี่ยงสีที่ไม่จำเป็นhttp://www.html5rocks.com/en/tutorials/speed/unn needed-paints/

— snobojohan
แหล่งที่มา

6

ฉันสังเกตเห็นสิ่งเดียวกันและแม้ว่ามันจะทำให้ฉันรำคาญจริง ๆ แต่ฉันเชื่อว่าไม่มีวิธีการจัดการที่เหมาะสม

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

สิ่งนี้ควรหลีกเลี่ยง!

.btn:focus {
  outline: none;
}

— Oscar Bolaños
แหล่งที่มา

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

— apocalypz

6

ฉันหาทางออก เมื่อเรามุ่งเน้น bootstrap ใช้ box-shadow ดังนั้นเราจึงปิดการใช้งาน (ชื่อเสียงไม่เพียงพอไม่สามารถอัปโหลดภาพ :()

ฉันเพิ่ม

.btn:focus{
    box-shadow:none !important;
}

มันได้ผล.

— ทอฟฟี่
แหล่งที่มา

6

ตัวเลือก 1: ใช้`:focus-visible`คลาสเทียม

:focus-visibleหลอกชั้นสามารถใช้ในการฆ่าเค้าร่างน่าเกลียดและมุ่งเน้นไปที่ปุ่มแหวนและองค์ประกอบต่างๆสำหรับผู้ใช้ที่ไม่ได้รับการนำทางผ่านทางแป้นพิมพ์ (เช่นผ่านการสัมผัสหรือคลิกเมาส์)

/** 
 * The default focus style is likely provided by Bootstrap or the browser
 * but here we override everything else with a visually appealing cross-
 * browser solution that works well on all focusable page elements
 * including buttons, links, inputs, textareas, and selects.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */
    0 0 0 .35rem #069 !important; /* faux focus ring color */
}

/**
 * Undo the above focused button styles when the element received focus
 * via mouse click or touch, but not keyboard navigation.
 */
*:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

คำเตือน: ในฐานะของปี 2020 :focus-visibleหลอกชั้นจะได้รับการสนับสนุนอย่างกว้างขวางทั่วเบราว์เซอร์ อย่างไรก็ตามโพลีฟิลนั้นใช้งานง่ายมาก ดูคำแนะนำด้านล่าง

ตัวเลือก 2: ใช้`.focus-visible`polyfill

การแก้ปัญหานี้ใช้คลาส CSS ปกติแทนการหลอกชั้นดังกล่าวข้างต้นและมีการสนับสนุนเบราว์เซอร์กว้างเพราะมันเป็นอย่างเป็นทางการ polyfill

ขั้นตอนที่ 1: เพิ่มการพึ่งพา Javascript ในหน้า HTML ของคุณ

หมายเหตุ: polyfill ที่สามารถมองเห็นโฟกัสได้ต้องใช้ polyfill เพิ่มเติมสำหรับเบราว์เซอร์รุ่นเก่าที่ไม่สนับสนุน classList :

<!-- place this code just before the closing </html> tag -->
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList"></script>
<script src="https://unpkg.com/focus-visible"></script>

ขั้นตอนที่ 2: เพิ่ม CSS ต่อไปนี้ในสไตล์ชีทของคุณ

ต่อไปนี้เป็นเวอร์ชัน CSS ที่ได้รับการแก้ไขของเอกสารด้านบนอย่างละเอียด

/**
 * Custom cross-browser styles for keyboard :focus overrides defaults.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069 !important;
}

/**
 * Remove focus styles for non-keyboard :focus.
 */
*:focus:not(.focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

ขั้นตอนที่ 3 (ตัวเลือก): ใช้คลาส 'โฟกัสที่มองเห็นได้' หากจำเป็น

หากคุณมีรายการใด ๆ ที่คุณต้องการแสดงแหวนโฟกัสเมื่อมีคนคลิกหรือใช้การสัมผัสจากนั้นเพียงเพิ่มfocus-visibleคลาสในองค์ประกอบ DOM

<!-- This example uses Bootstrap classes to theme a button to appear like
     a regular link, and then add a focus ring when the link is clicked --->
<button type="button" class="btn btn-text focus-visible">
  Clicking me shows a focus box
</button>

ทรัพยากร:

https://css-tricks.com/keyboard-only-focus-styles/

การสาธิต:

https://wicg.github.io/focus-visible/demo/

— เจมส์วิลสัน
แหล่งที่มา

แต่ถ้าแม้ Chrome ไม่สนับสนุนมันยังมันอาจจะไม่ได้เป็นทางออกที่ดีที่สุด (ตอนนี้)

— เอลียาห์จำลอง

คุณแนะนำอะไรแทน

— JamesWilson

ซ่อนโครงร่างเหมือนคำตอบอื่น ๆ จนกว่าจะแก้ปัญหานี้ได้มาตรฐานมากขึ้น

— Elijah Mock

จากการอ่านสิ่งต่าง ๆ ของฉันหากการเข้าถึงเป็นเรื่องที่น่ากังวลการซ่อนโครงร่างด้วย<whatever>:focus { outline: none }ความคิดที่แย่กว่าโซลูชันนี้ จริงๆแล้วมีคนในชุมชนการเข้าถึงที่คุณไม่ต้องการลบเค้าร่างและทำให้ทุกอย่างมี: รูปแบบโฟกัส (ทั้งโครงร่างหรือกล่องเงา) และไม่ต้องการที่จะสนับสนุน: มองเห็นได้จนกว่าเบราว์เซอร์จะใช้วิธีการให้ ผู้ใช้ระบุการตั้งค่าของผู้ใช้ว่ารายการทั้งหมดควรสามารถโฟกัสได้หรือไม่ ฉันชอบคิดว่า: สิ่งที่เห็นได้ชัดของโฟกัสนั้นเป็นสิ่งที่มีความสุขระหว่างการออกแบบและ a11y

— JamesWilson

5

หากข้างต้นไม่ได้ผลสำหรับคุณลองสิ่งนี้:

.btn: โฟกัส {outline: none; box-shadow: none; border: 2px solid transparent;}

ตามที่ผู้ใช้ 1933897 ชี้ให้เห็นอาจเป็นเรื่องเฉพาะสำหรับ MacOS ด้วย Chrome

— alns
แหล่งที่มา

ยังคงใช้ได้เมื่อใช้งานbootstrap 4.0- ใน windows

— 3gwebtrain

5

สาย แต่ใครจะรู้ว่ามันอาจช่วยใครบางคน CSS จะมีลักษณะดังนี้:

.rhighlight{
   outline: none !important;
   box-shadow:none
}

HTML จะมีลักษณะดังนี้:

<button type="button" class="btn btn-primary rHighlight">Text</button>

วิธีนี้คุณสามารถเก็บ btn และพฤติกรรมที่เกี่ยวข้อง

— สเตฟานี Wyche
แหล่งที่มา

1

element:focus { box-shadow: none; }ลบโครงร่าง / เงาสีน้ำเงิน

— user435421

3

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

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

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

— ชาร์ลส์
แหล่งที่มา

นี่เป็นการหลอกลวงครึ่งหนึ่งสำหรับฉัน ฉันใช้ React และ React-Bootstrap หลังจากคลิกปุ่มจะยังคงเน้นด้วยการเรืองแสงรอบนี้ การเพิ่ม e.target.blur (); ลบแสงออก แต่ปุ่มยังคงสีที่แตกต่าง

— pixelwiz

3

สไตล์

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

การใช้

<button class="btn btn-primary not-focusable">My Button</button>

— Bogdan Kanteruk
แหล่งที่มา

โซลูชันนี้แตกต่างจากคำตอบอื่น ๆ อย่างไร

— apaul

2

มีความแตกต่างเพียงเล็กน้อยเท่านั้น - คุณสามารถลบโฟกัสสำหรับองค์ประกอบที่คุณต้องการด้วยการระบุระดับ "ไม่สามารถโฟกัสได้" โดยไม่มีการแทนที่พฤติกรรมของปุ่มทั้งหมดลิงก์ ฯลฯ

— Bogdan Kanteruk

3

ลองใช้วิธีนี้เพื่อลบขอบรอบ ๆ ปุ่ม เพิ่มรหัสนี้ใน CSS

ลอง

button:focus{
outline:0px;
}

หากไม่ได้ผลให้ใช้ด้านล่าง

button:focus{
 outline:none !important;
 }

— Rana Aalamgeer
แหล่งที่มา

ตัวที่สองทำงานได้แม้กับปุ่ม React Material UI

— Geek Guy

3

สำหรับคนที่ต้องการวิธี CSS ที่บริสุทธิ์เพื่อทำสิ่งนั้น

:focus:not(:focus-visible) { outline: none }

สิ่งนี้สามารถใช้งานได้กับลิงก์และอื่น ๆ และโบนัสมันช่วยให้สามารถเข้าถึงคีย์บอร์ดได้ ในที่สุดเบราว์เซอร์จะไม่สนใจซึ่งไม่สนับสนุน: สามารถมองเห็นโฟกัสได้

— Martin Pedros
แหล่งที่มา

4

สิ่งนี้จะใช้งานได้กับ Chrome ที่เปิดใช้งานคุณลักษณะทดลองเท่านั้นตามdeveloper.mozilla.org/en-US/docs/Web/CSS/:focus-visible

— Justin Kahn

focus-visibleตอนนี้มี polyfill อย่างเป็นทางการ stackoverflow.com/a/60219624/413538ของฉันสำหรับคำถามนี้จะอธิบายเกี่ยวกับวิธีการทำความเข้าใจทั้งหมดนี้

— JamesWilson

2

เราประสบปัญหาที่คล้ายกันและพบว่าBootstrap 3 ไม่มีปัญหาในแท็บ (ใน Chrome) ดูเหมือนว่าพวกเขากำลังใช้สไตล์เค้าร่างซึ่งช่วยให้เบราว์เซอร์ตัดสินใจว่าจะทำอย่างไรดีที่สุดและ Chrome ดูเหมือนจะทำสิ่งที่คุณต้องการ: แสดงโครงร่างเมื่อเน้นไปนอกเสียจากว่าคุณเพิ่งคลิกองค์ประกอบ

การสนับสนุนoutline-styleเป็นเรื่องยากที่จะตรึงลงเนื่องจากเบราว์เซอร์ตัดสินใจว่ามันหมายถึงอะไร ที่ดีที่สุดในการตรวจสอบในเบราว์เซอร์น้อยและมีกฎการถอยกลับ

— TeknoFiend
แหล่งที่มา

2

อีกวิธีหนึ่งที่เป็นไปได้คือการเพิ่มคลาสโดยใช้ Javascript listener เมื่อผู้ใช้คลิกที่ปุ่มจากนั้นลบคลาสนั้นที่โฟกัสกับผู้ฟังคนอื่น สิ่งนี้จะช่วยให้สามารถเข้าถึงได้ (แท็บที่มองเห็นได้) ในขณะที่ยังป้องกันพฤติกรรมที่แปลกประหลาดของ Chrome ในการพิจารณาปุ่มที่เน้นเมื่อคลิก

JS:

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS:

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

ตัวอย่างแบบเต็มที่นี่: https://jsfiddle.net/4bbb37fh/

— Seb Woolford
แหล่งที่มา

ใช้ mouseDown แทนการคลิก เมื่อคลิกที่โครงร่างจะปรากฏขึ้นในขณะที่กดเมาส์ (โดยไม่ปล่อย) เริ่มต้น

— Vincent Hoch-Drei

2

มันเป็นงานฉันหวังว่าจะช่วยคุณ

.btn:focus, .btn:focus:active {
    outline: none;
}

— ДмитрийБудницкий
แหล่งที่มา

.btn: เน้นควรมีโครงร่างสำหรับการเข้าถึง (เมื่อแท็บ)

— yennefer

2

.btn:focus:active {
  outline: none;
}

สิ่งนี้จะลบโครงร่างเมื่อคลิก แต่ยังคงโฟกัสเมื่อทำการแท็บ (สำหรับ a11y)

— yennefer
แหล่งที่มา

สิ่งนี้จะลบเฉพาะโครงร่างบนเมาส์ลงเท่านั้น หลังจากเลื่อนเมาส์ขึ้นโครงร่างจะปรากฏขึ้น

— Wellspring

2

วิธีนี้ใช้ได้ผลดีที่สุด

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}

1

  .btn:focus,.btn:active, a{
        outline: none !important;
        box-shadow: none;
     }

โครงร่างนี้: ไม่มีการทำงานสำหรับทั้งปุ่มและแท็ก

— มิลาน Panigrahi
แหล่งที่มา

คำถามนี้จะตอบคำถามได้อย่างไร กรุณาเพิ่มคำอธิบาย

— André Kool

1

เพิ่มใน CSS:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

— Gabriel Reis
แหล่งที่มา

1

ฉันพบวิธีแก้ไขเพียงเพิ่มบรรทัดด้านล่างในรหัส css ของคุณ

button:focus { outline: none }

— Manish Kumar Srivastava
แหล่งที่มา

0

ฉันเพิ่งมีปัญหาเดียวกันนี้ใน MacOS และ Chrome ในขณะที่ใช้ปุ่มเพื่อทริกเกอร์เหตุการณ์ "การเปลี่ยนแปลง" หากใครก็ตามที่กำลังอ่านสิ่งนี้กำลังใช้ตัวรับฟังเหตุการณ์อยู่คุณสามารถแก้ไขได้โดยการโทร.blur()หลังจากดำเนินการ

ตัวอย่าง:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

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

— jospablos
แหล่งที่มา

0

tabIndex="-1"คุณสามารถตั้งค่า มันจะทำให้เบราว์เซอร์ข้ามปุ่มนี้เมื่อคุณ TAB ผ่านการควบคุมที่สามารถโฟกัสได้

แนะนำ "แก้ไข" อื่น ๆ ที่นี่ลบเฉพาะโครงร่างโฟกัส แต่ยังคงปล่อยปุ่มไว้ อย่างไรก็ตามจากมุมมองการใช้งานคุณได้ลบแสงออกไปแล้วดังนั้นผู้ใช้ของคุณจะไม่ทราบว่าปุ่มใดที่โฟกัสอยู่ในขณะนี้ แต่อย่างใด

ในทางกลับกันการทำปุ่มที่ไม่สามารถแท็บได้มีผลกระทบต่อการเข้าถึงได้ง่าย

ฉันใช้มันเพื่อลบเค้าร่างโฟกัสออกจากปุ่ม X bootstrap modalซึ่งมีปุ่ม "ปิด" ที่ด้านล่างซ้ำดังนั้นวิธีการแก้ปัญหาของฉันจึงไม่มีผลกระทบต่อการเข้าถึง

— zmechanic
แหล่งที่มา

0

หากคุณใช้เบราว์เซอร์ webkit (และอาจเป็นเบราว์เซอร์ที่เข้ากันได้กับคำนำหน้าผู้ขาย webkit) โครงร่างนั้นเป็นของ-webkit-focus-ringpseudoclass ของปุ่ม เพียงแค่ติดตั้งก็outlineเพื่อnone:

*:-webkit-focus-ring {
  outline: none;
}

Chrome เป็นเบราว์เซอร์ webkit และผลกระทบนี้เกิดขึ้นกับ Linux เช่นกัน (ไม่ใช่แค่สิ่งที่เป็น macOS แม้ว่าบางสไตล์ของ Chrome จะเป็น macOS เท่านั้น)

— เนทไซเมอร์
แหล่งที่มา

0

ฉันมีปัญหาเดียวกันกับการใช้<a>ปุ่มเป็นและฉันค้นพบว่า~~ฉันไม่มี~~วิธีแก้ปัญหาโดยการเพิ่ม attr type="button"ทำให้มันทำงานได้ตามปกติสำหรับฉันอย่างน้อย

<a type="button" class="btn btn-primary">Release Me!</a>

— spcsLrg
แหล่งที่มา

typeแอตทริบิวต์ไม่ควรมีผลเกี่ยวกับเรื่องนี้และbuttonเป็นค่าที่ไม่ถูกต้องสำหรับมัน แอตทริบิวต์ยอมรับชนิดไมม์และบอกลูกค้าสิ่งที่ประเภทของข้อมูลที่มันควรจะคาดหวังที่จะได้รับหากเป็นไปตามการเชื่อมโยง (เช่น<a type="application/pdf" ...>.

— เควนติน

@Quentin ขอบคุณ ใช่ฉันรู้แล้ว ฉันเริ่มต้นด้วยrole="button"แต่ไม่ได้ผล (หลังจากใช้งาน<button>แทน<a>) การดำเนินงานของฉันโดยเฉพาะเรียกร้องและไม่ได้<a> <button>ดังนั้นหลังจากแก้ไขมากฉันพบวิธีแก้ปัญหานี้ (ส่วนใหญ่อาจเป็นข้อผิดพลาด BS)!

— spcsLrg

0

โดยตรงในแท็ก html (ในสถานการณ์ที่คุณอาจต้องการที่จะออกจากชุดรูปแบบการบูตในสถานที่อื่น ๆ ในการออกแบบของคุณ) ..

ตัวอย่างที่จะลอง ..

<button style="border: transparent;">

<button style="border: 1px solid black;">

..ฯลฯ,. ขึ้นอยู่กับเอฟเฟกต์ที่ต้องการ

— ไม่มีใคร
แหล่งที่มา

วิธีลบโฟกัสรอบ ๆ ปุ่มเมื่อคลิก

ตัวเลือก 1: ใช้:focus-visibleคลาสเทียม

ตัวเลือก 2: ใช้.focus-visiblepolyfill

ขั้นตอนที่ 1: เพิ่มการพึ่งพา Javascript ในหน้า HTML ของคุณ

ขั้นตอนที่ 2: เพิ่ม CSS ต่อไปนี้ในสไตล์ชีทของคุณ

ขั้นตอนที่ 3 (ตัวเลือก): ใช้คลาส 'โฟกัสที่มองเห็นได้' หากจำเป็น

ตัวเลือก 1: ใช้`:focus-visible`คลาสเทียม

ตัวเลือก 2: ใช้`.focus-visible`polyfill