ลบเส้นขอบสีน้ำเงินออกจากปุ่ม css แบบกำหนดเองใน Chrome

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

นี่คือลักษณะที่ปรากฏก่อนที่จะถูกคลิก (และฉันต้องการให้มันยังคงดูแลหลังจากถูกคลิก):

และนี่คือขอบเขตที่ฉันพูดถึง:

นี่คือ CSS ของฉัน:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

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

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

ที่กล่าวว่าหากคุณยืนยัน CSS นี้ควรทำงาน:

button:focus {outline:0;}

ลองดูหรือ JSFiddle: http://jsfiddle.net/u4pXu/

หรือในตัวอย่างนี้:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

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

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

รอ! มีเหตุผลที่เค้าน่าเกลียด!

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

วิธีแก้ไขที่เป็นไปได้: ปุ่มมืดลงเมื่อทำการโฟกัส

สำหรับตัวอย่างด้านล่างโครงร่างสีน้ำเงินของ Chrome ถูกลบออกครั้งแรกโดยใช้ button:focus { outline:0 !important; }

นี่คือปุ่ม Bootstrap พื้นฐานของคุณตามที่ปรากฏตามปกติ:

นี่คือปุ่มเมื่อพวกเขาได้รับโฟกัส:

นี่คือปุ่มเมื่อกด:

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

มันไม่ได้มีไว้สำหรับผู้ใช้ที่พิการ

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

ฉันเพิ่งลบเค้าร่างออกจากแท็กทั้งหมดในหน้าโดยเลือกทั้งหมดและใช้เค้าร่าง: ไม่มีกับทุกอย่าง :)

*:focus {outline:none}

ตามที่กล่าวถึง bagofcole คุณอาจต้องเพิ่ม! สำคัญด้วยดังนั้นสไตล์จะมีลักษณะดังนี้:

*:focus {outline:none !important}

ในตัวอย่างของปัญหานี้ฉันต้องระบุ box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

อย่าลืม!importantคำประกาศเพื่อผลลัพธ์ที่ดีกว่า

button:focus {outline:0 !important;}

กฎที่มีคุณสมบัติ!! สำคัญจะถูกนำไปใช้เสมอไม่ว่าจะมีกฎนั้นปรากฏในเอกสาร CSS ที่ใดก็ตาม

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

ใช้: เน้นที่มองเห็น ปัจจุบันเป็นข้อเสนอ W3C สำหรับการออกแบบเฉพาะคีย์บอร์ดโดยใช้ CSS และรองรับใน Firefox ( caniuse ) จนกระทั่งเบราว์เซอร์อื่น ๆ ที่สำคัญสนับสนุนคุณสามารถใช้ที่แข็งแกร่งนี้polyfill

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

ฉันยังเขียนโพสต์รายละเอียดเพิ่มเติมในกรณีที่คุณต้องการข้อมูลเพิ่มเติม

เพิ่มสิ่งนี้ในไฟล์ CSS ของคุณ

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

ใช้สิ่งนี้:

:active {
    outline:none;
}

หรือถ้าไม่ได้ผล:

:active {
   outline:none !important;
}

สิ่งนี้ใช้ได้สำหรับฉัน (FF และ Chrome อย่างน้อย) แทนการกำหนดเป้าหมาย:focusของรัฐเพียงเป้าหมาย:activeรัฐและที่จะเอาเน้นเสือกความสุนทรีย์ในเบราว์เซอร์ของคุณเมื่อผู้ใช้คลิกลิงก์ แต่จะยังคงสถานะโฟกัสไว้เมื่อผู้ใช้ที่มีแท็บความพิการหรือแท็บเลื่อนผ่านหน้าเว็บ ทั้งสองฝ่ายมีความสุข :)

สำหรับปัญหานี้:

ใช้สิ่งนี้:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

ผลลัพธ์:

สำหรับทุกคนที่ใช้ Bootstrap และมีปัญหานี้พวกเขาใช้: แอ็คทีฟ: โฟกัสและเพียงแค่: แอ็คทีฟและ: โฟกัสดังนั้นคุณจะต้อง:

element:active:focus {
    outline: 0;
}

หวังว่าจะช่วยให้ใครบางคนคิดว่าเวลาหนึ่งออกไปกระแทกหัวของฉันด้วยความสงสัยเล็กน้อยว่าทำไมเรื่องง่าย ๆ ไม่ทำงาน

โซลูชันส่วนใหญ่จะไม่ทำงานหากคุณใช้ Bootstrap 4.1 และอาจเป็นเวอร์ชั่นอื่น หลังจากการต่อสู้ที่หัวมากฉันค้นพบว่าคุณจำเป็นต้องใช้คลาสไม่มีเงา :

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

นี่คือสิ่งที่ได้ผลสำหรับฉัน:

button:focus {
    box-shadow:none;
}

การแก้ไขสำหรับ Chrome และเบราว์เซอร์อื่น ๆ

button:focus { outline: none !important; box-shadow: none !important; }

ลองใช้รหัสนี้สำหรับองค์ประกอบทั้งหมดที่มีปัญหาเส้นขอบสีน้ำเงิน

*{
outline: none;
}

หรือ

*{
outline-style: none;
}

อีกวิธีหนึ่งในการแก้ปัญหาการเข้าถึงที่ไม่ได้กล่าวถึงในที่นี้คือการใช้Javascriptเล็กน้อย เครดิตไปที่บล็อกโพสต์อันชาญฉลาดนี้จากแฮ็คนููน: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

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

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

ฉันประสบปัญหาเดียวกันดังนั้นฉันจึงใช้ CSS ง่าย

.custom-button {
    outline: none
}

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

input:focus {outline:0;}

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

1. ใช้โพลีฟิลเล็ก ๆ นี้ (ประมาณ 10kb): https://github.com/WICG/focus-visible
2. เพิ่มโค้ดถัดไปที่ใดที่หนึ่งใน css ของคุณ:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

การสนับสนุนเบราว์เซอร์ของตัวเลือก css4: สามารถมองเห็นโฟกัสได้ในขณะนี้อ่อนแอมาก:
https://caniuse.com/#search=focus-visible

outline:none;เพียงแค่เขียน ไม่จำเป็นต้องใช้องค์ประกอบหลอกfocus

นี่เป็นปัญหาในตระกูล Chrome และมีอยู่ตลอดไป

มีการยกข้อผิดพลาดhttps://bugs.chromium.org/p/chromium/issues/detail?id=904208

มันสามารถแสดงที่นี่: https://codepen.io/anon/pen/Jedvwjทันทีที่คุณเพิ่มเส้นขอบให้กับปุ่มที่เหมือนปุ่มใด ๆ (พูดว่า role = "button" ถูกเพิ่มลงในแท็กตัวอย่างเช่น) Chrome ทำให้เกิดความยุ่งเหยิง และตั้งค่าสถานะโฟกัสเมื่อคุณคลิกด้วยเมาส์

ฉันขอแนะนำให้ใช้โปรแกรมแก้ไขนี้: https://github.com/wicg/focus-visible https://github.com/wicg/focus-visible

เพียงทำต่อไปนี้

npm install --save focus-visible

เพิ่มสคริปต์ใน html ของคุณ:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

หรือนำเข้าสู่ไฟล์หลักของคุณหากใช้ webpack หรืออะไรที่คล้ายกัน:

import 'focus-visible/dist/focus-visible.min';

จากนั้นใส่สิ่งนี้ลงในไฟล์ css ของคุณ:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

คุณสามารถตั้งค่า:

button:focus {outline:0;}

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

ฉันมีปัญหาเดียวกันกับ bootstrap ฉันแก้ไขด้วยโครงร่างและกล่องเงา

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}