จะลบเค้าร่างของ Firefox ใน BUTTONS และลิงก์ได้อย่างไร

507

ฉันสามารถทำให้ Firefox ไม่แสดงเส้นขอบโฟกัสที่น่าเกลียดในลิงก์ด้วย:

a:focus { 
    outline: none; 
}

แต่ฉันจะทำเช่นนี้กับ<button>แท็กได้อย่างไร เมื่อฉันทำสิ่งนี้:

button:focus { 
    outline: none; 
}

ปุ่มยังคงมีเส้นขอบโฟกัสอยู่เมื่อฉันคลิก

(และใช่ฉันรู้ว่านี่เป็นปัญหาการใช้งาน แต่ฉันต้องการให้คำแนะนำการโฟกัสของฉันเองซึ่งเหมาะสมกับการออกแบบแทนที่จะเป็นจุดสีเทาน่าเกลียด)

css firefox

— Edward Tanguay
แหล่งที่มา

2

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

— Geert

1

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

— Markus Graf

787

button::-moz-focus-inner {
  border: 0;
}

— Josh Crozier
แหล่งที่มา

15

ใช่มันก็ใช้ได้สำหรับฉันเช่นกัน! ตอนนี้จะสามารถเลือกได้อย่างไร?

— 7wp

16

โปรดทราบว่าสิ่งนี้ใช้ได้กับอินพุต (เช่นอินพุต :: - moz-focus-inner {border: 0;})

— El Yobo

15

วัตถุประสงค์ของเครื่องหมายโคลอนคู่: (สัญกรณ์ CSS3) evotech.net/blog/2007/05/…

— sholsinger

21

อันนี้ใช้ไม่ได้กับฉันเพราะ bootstrap.css ทำปุ่มประนี้น่าเกลียด แต่ฉันได้ใส่:focus {outline:none !important;}

— machineaddict

5

: focus {outline: none;} :: - moz-focus-inner {border: 0;} จะเจาะจงน้อยกว่า

— Ben

311

ไม่จำเป็นต้องกำหนดตัวเลือก

:focus {outline:none;}
::-moz-focus-inner {border:0;}

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

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

— Anderson Custódio
แหล่งที่มา

8

ขอบคุณสิ่งนี้ใช้ได้กับฉันเมื่อคำตอบที่ถูกต้องไม่ได้ ฉันต้องใช้เครื่องมือเลือกผิด

— irl_irl

ขอบคุณสำหรับสิ่งนี้สิ่งนี้จะลบออกในลิงก์และปุ่มด้วยหรือไม่

— นาธาน

3

อันนี้ดีที่สุด! คำตอบที่ยอมรับนั้นมีไว้สำหรับ<button>ไม่ใช่<a>หรือ<input>

— Ron van der Heijden

2

สมบูรณ์แบบใน Mozilla Firefox 30 ภายใต้ Ubuntu (GNU / Linux)

— e-info128

4

ฉันจะบันทึกที่สองเกี่ยวกับการเข้าถึงที่ไม่สะดวกนี้ สิ่งสำคัญคือต้องจำไว้ว่าทุกคนไม่สามารถใช้เมาส์ดูหรือดูได้ ที่กล่าวว่าตามลิงก์ (และสามัญสำนึก) การซ่อนเค้าร่างแบ่ง a11y เมื่อทำเสร็จแล้วwithout ... an author-supplied visual focus indicatorกล่าวอีกนัยหนึ่งก็คือการแทนที่รูปแบบตัวแทนผู้ใช้ด้วยตัวคุณเองตามที่ OP ได้กล่าวไว้ เป็นการดีที่ควรจะมีความคมชัดสูง

— johncip

48

หากคุณต้องการใช้ CSS เพื่อกำจัดเค้าร่างจุด:

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0;
    } 
/*for IE8 and below */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

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

คุณไม่ต้องการหน่วยที่เป็นศูนย์ 0pxสามารถถูกแทนที่ด้วย just0

— สแลง

44

ด้านล่างใช้งานได้สำหรับฉันในกรณีของ LINKS คิดว่าจะแบ่งปัน - ในกรณีที่มีคนสนใจ

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

ไชโย!

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

12

เพียงแค่a { outline: none; }ควรจะเพียงพอสำหรับการเชื่อมโยง

— ให้

3

ที่นี่เคล็ดลับการทำสิ่งสำคัญไม่ได้วิธีแก้ปัญหาอื่นไม่มีและไม่ได้ผล สำหรับฉัน.

— Cristiano Fontes

แต่บ่อยครั้งที่คุณควรใช้a { outline: none; }กับ!important->a { outline: none !important; }

— joryl

24

:focus, :active {
    outline: 0;
    border: 0;
}

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

ทำงานเหมือนมีเสน่ห์สำหรับกล่องตัวเลือกที่ฉันใช้

— Muhammad Ahsan

1

นี่ไม่เจาะจงพอและฉันไม่ต้องการใช้aองค์ประกอบที่สำคัญหรือกำหนดเป้าหมายเท่านั้นดังนั้นฉันจึงพบตัวเลือกที่ดีสำหรับฉัน body :focus, body :active { outline: 0; border: 0; } ::-moz-focus-inner { border: 0; }

— Ivan Durst

10

[อัพเดต] โซลูชันนี้ใช้งานไม่ได้อีกต่อไป วิธีแก้ปัญหาที่เหมาะกับฉันคือhttps://stackoverflow.com/a/3844452/925560

คำตอบที่ทำเครื่องหมายว่าถูกต้องใช้ไม่ได้กับ Firefox 24.0

หากต้องการลบโครงร่างจุดของ Firefox บนปุ่มและจุดยึดแท็กฉันได้เพิ่มโค้ดด้านล่าง:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

ฉันพบวิธีแก้ปัญหาที่นี่: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

— Renato Carvalho
แหล่งที่มา

2

มันไม่ทำงานอีกต่อไป: / วิธีแก้ปัญหาที่ใช้งานได้คือstackoverflow.com/a/3844452/925560

— Renato Carvalho

8

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

รหัสนี้ใช้ได้กับฉันใน Firefox เวอร์ชัน 30 บน Windows 7 บางทีอาจช่วยคนอื่นได้ :)

button:focus {outline:0 !important;}

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

สิ่งเดียวกันนี่คือทางออกเดียวที่ทำงานกับ FF 38.0.5

— OlivierH

6

ไม่มีวิธีใดที่จะลบจุดโฟกัสเหล่านี้ใน Firefox โดยใช้ CSS

หากคุณสามารถเข้าถึงคอมพิวเตอร์ที่เว็บแอปพลิเคชันทำงานให้ไปที่ about: config ใน Firefox และตั้งค่าbrowser.display.focus_ring_widthเป็น 0 จากนั้น Firefox จะไม่แสดงเส้นขอบใด ๆ

ข้อผิดพลาดต่อไปนี้อธิบายหัวข้อ: https://bugzilla.mozilla.org/show_bug.cgi?id=74225

— Vitaly Sharovatov
แหล่งที่มา

ขอบคุณมันใช้งานได้ดี แต่ฉันได้สร้างลิงก์มากมายก่อนหน้านี้ฉันไม่เคยได้รับปัญหานี้มาจนถึงตอนนี้ แต่ตอนนี้ฉันสับสนดังนั้นอะไรคือเหตุผลก่อนหน้านี้ถึงปัจจุบัน?

— Durga Rao

นี่คือคำตอบตอนนี้เป็นเท็จอย่างสมบูรณ์ การตั้งค่า::-moz-focus-inner {border:0;}ตามที่กล่าวไว้ในคำตอบอื่น ๆ อีกมากมายทำงานได้อย่างสมบูรณ์

— Andy Mercer

@AndyM คำตอบนี้ใช้งานได้ โซลูชันนี้มีคำตอบอื่น ๆ สำหรับ CSS และใช้งานได้กับแต่ละไซต์เท่านั้น

— Rahil Wazir

7

คำถามถามว่ามันสามารถทำได้กับ CSS และคำตอบบอกว่ามันไม่สามารถ นั่นเป็นเท็จ มันสามารถ

— Andy Mercer

6

มีวิธีแก้ไขปัญหามากมายที่พบบนเว็บสำหรับสิ่งนี้ซึ่งส่วนใหญ่ทำงานได้ แต่บังคับให้ทำเช่นนี้เพื่อให้ไม่มีสิ่งใดที่สามารถเน้น / โฟกัสได้เมื่อใช้สิ่งต่อไปนี้:

::-moz-focus-inner, :active, :focus {
    outline:none;
    border:0;
    -moz-outline-style: none;
}

นี่เป็นการเพิ่มความปลอดภัยที่เพิ่มขึ้นเล็กน้อยและผนึกข้อตกลง!

— แชนนอนฮอชกินส์
แหล่งที่มา

6

สิ่งนี้จะได้รับการควบคุมช่วง:

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

จาก: ลบเค้าร่างเส้นประจากองค์ประกอบอินพุตช่วงใน Firefox

— ผมบ๊อบ
แหล่งที่มา

ไม่มีวิธีแก้ปัญหาอื่นให้range- ขอบคุณ :)

— Kamil Kiełczewski

สมบูรณ์แบบใช้ได้กับ Firefox 72 บน linux เช่นกัน!

— asdjfiasd

5

ทดสอบกับ Firefox 46 และ Chrome 49 โดยใช้รหัสนี้

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

ก่อนหน้า (มองเห็นจุดสีขาว)

หลังจาก (มองไม่เห็นจุดสีขาว)

ถ้าคุณต้องการที่จะใช้เฉพาะในช่องใส่เพียงไม่กี่ปุ่ม ฯลฯ ใช้รหัสที่เฉพาะเจาะจงมากขึ้น

input[type=text] {
  outline: none !important;
}

Happy Coding !!

— Madan Sapkota
แหล่งที่มา

!importantเป็นสิ่งที่จำเป็นสำหรับผมที่จะแทนที่สไตล์ชีตของ Firefox ไชโย!

— SamHH

5

เพียงเพิ่ม CSS นี้เพื่อเลือกกล่อง

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

มันใช้งานได้ดีสำหรับฉัน

— Abhay Singh
แหล่งที่มา

4

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

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

บางครั้งฉันรู้สึกว่าจำเป็นต้องทำโครงร่างที่น่ารำคาญออกมา แต่ฉันมักจะเตรียมคิวภาพโฟกัสแบบอื่นเสมอ

และไม่เคยใช้blur()ฟังก์ชั่น js ใช้::-moz-focus-innerคลาสหลอก

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

4

ในกรณีส่วนใหญ่โดยไม่ต้องเพิ่ม!importantรหัส CSS มันจะไม่ทำงาน

ดังนั้นอย่าลืมเพิ่ม `!important`

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}

หรือรหัสอื่น ๆ :

button::-moz-focus-inner {
  border: 0 !important;
}

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

3

button::-moz-focus-inner { border: 0; }

ที่ใดbuttonสามารถเป็นตัวเลือก CSS ที่คุณต้องการปิดใช้งานลักษณะการทำงาน

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

3

คุณอาจต้องการเน้นที่เข้มข้นมากขึ้นแทนที่จะกำจัดมัน

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue}

— Jason Plank
แหล่งที่มา

2

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

— Hkan

@Hkan ใช่ฉันเห็นด้วย แต่โครงร่างของ Firefox นั้นน่าเกลียดโดยเฉพาะอย่างยิ่งเมื่ออยู่ใกล้กับจุดโฟกัสที่กำหนดเอง

— นาธาน

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

— Hkan

3

ลบเค้าร่างเส้นประจากลิงก์ปุ่มและองค์ประกอบอินพุต

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

— Fizer Khan
แหล่งที่มา

3

หากคุณมีขอบบนปุ่มและต้องการซ่อนเค้าร่างจุดใน Firefox โดยไม่ต้องลบเส้นขอบ (และด้วยเหตุนี้มันจึงมีความกว้างเป็นพิเศษบนปุ่ม) คุณสามารถใช้:

.button::-moz-focus-inner {
    border-color: transparent;
}

— Dave Everitt
แหล่งที่มา

3

โค้ด CSS ด้านล่างใช้เพื่อลบสิ่งนี้:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

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

2

ดูเหมือนว่าวิธีเดียวที่จะบรรลุเป้าหมายนี้คือการตั้งค่า

browser.display.focus_ring_width = 0

ใน about: config บนพื้นฐานของเบราว์เซอร์

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

1

ใช้งานได้กับ firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

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

1

หลังจากลองตัวเลือกมากมายจากด้านบนเฉพาะสิ่งต่อไปนี้ที่ใช้ได้กับฉัน

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}

— Waqas Bukhary
แหล่งที่มา

ที่จริงแล้ว (อย่างน้อยใน Firefox 77) คุณต้องการเพียง: button:focus { outline: none !important } หรือถ้าคุณชอบฉันไม่ชอบ! สิ่งสำคัญ, มันยังใช้แทนสไตล์ของ Firefox: :root button:focus { outline: none }

— Jonas Sandstedt

1

พร้อมกับ Bootstrap 3 ฉันใช้รหัสนี้ กฎชุดที่สองเพียงเลิกทำสิ่งที่ bootstrap ทำเพื่อปุ่มโฟกัส / ใช้งาน:

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

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

โปรดทราบว่าไฟล์ css ที่คุณกำหนดเองควรอยู่หลังไฟล์ Bootstrap css ในโค้ด html ของคุณเพื่อแทนที่มัน

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

1

ไม่ควรพลาด! สำคัญ

button::-moz-focus-inner {
 border: 0 !important;
}

— Riwaj Chalise
แหล่งที่มา

! important ไม่ได้เป็นส่วนหนึ่งของคำตอบที่นี่และหากแอปของคุณต้องการคุณก็จะมีปัญหาในการแก้ปัญหาที่ใหญ่กว่าไฮไลต์รอบ ๆ ปุ่มของคุณ พยายามหลีกเลี่ยง! สำคัญเสมอ

— ขาวดำ

0

คุณสามารถลองbutton::-moz-focus-inner {border: 0px solid transparent;}ใน CSS ของคุณ

— ตามปกติ
แหล่งที่มา

จะลบเค้าร่างของ Firefox ใน BUTTONS และลิงก์ได้อย่างไร

ดังนั้นอย่าลืมเพิ่ม !important

ดังนั้นอย่าลืมเพิ่ม `!important`