อย่างไรก็ตามเพื่อป้องกันไม่ให้ไฮไลต์องค์ประกอบสีน้ำเงินใน Chrome เมื่อคลิกอย่างรวดเร็ว?

123

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

ฉันลองใช้โครงร่าง: ไม่มี แต่ไม่มีผล มีวิธีแก้ไขหรือไม่?

css google-chrome

— ช่างเหล็ก
แหล่งที่มา

ฉันไม่เห็นผลกระทบนี้ใน Chrome เวอร์ชันปัจจุบัน

— Billal Begueradj

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

— collimarco

170

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

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

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

สำหรับ chrome บน Android -webkit-tap-highlight-color: transparent;เป็นกฎเพิ่มเติมที่คุณอาจต้องการทดลองเพื่อรองรับ Android

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

1

สำหรับ Chrome เท่านั้นคุณอาจต้องการเพียงและuser-select webkit-user-select

— smts

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

— Smith

36

ไม่สามารถใช้งานกับ Chrome บน Android ได้ ฉันต้องใช้-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

— Iwazaru

25

-webkit-tap-highlight-color: transparent; เป็นส่วนสำคัญของ Chrome

— FisNaN

สำหรับ chrome บน Android -webkit-tap-highlight-color: โปร่งใส; - ทำงานให้ฉันขอบคุณ!

— CK Munn

213

สำหรับ Chrome บน Android คุณสามารถใช้คุณสมบัติ CSS -webkit-tap-highlight-color :

-webkit-tap-highlight-color เป็นคุณสมบัติ CSS ที่ไม่ได้มาตรฐานซึ่งกำหนดสีของไฮไลต์ที่ปรากฏบนลิงก์ในขณะที่มีการแตะ การไฮไลต์ระบุให้ผู้ใช้ทราบว่าการแตะของพวกเขาได้รับการยอมรับสำเร็จและระบุว่าพวกเขากำลังแตะองค์ประกอบใด

หากต้องการลบการไฮไลต์ทั้งหมดคุณสามารถตั้งค่าเป็นtransparent:

-webkit-tap-highlight-color: transparent;

โปรดทราบว่าสิ่งนี้อาจส่งผลต่อความสามารถในการเข้าถึง: ดูoutlinenone.com

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

4

ฉันพบว่าเมื่อคุณทำงานบนหน้าจอสัมผัส Chrome จะทำงานเหมือนกับใน Android ฉันมี <div> ซึ่งจะกะพริบเป็นสีน้ำเงินทุกครั้งที่คุณคลิกที่ไหนสักแห่งในนั้น เมื่อฉันใช้คำตอบนี้เท่านั้นมันก็หยุดลง ขอบคุณ!

— Valorum

2

ไม่มี css attys อื่น ๆ ที่จะทำเช่นนี้ สำคัญมากเนื่องจากการแตะที่ไฮไลต์จะบิดเบือนรูปลักษณ์ของสิ่งที่คลิกทำให้ภาษาภาพของคุณคลาดเคลื่อน

— Dominic Cerisano

23

-webkit-tap-highlight-color: transparent;ดูเหมือนจะทำงานเกินไป

— Bernard

1

ฉันชอบสิ่งนี้สำหรับกิจกรรมสัมผัสเป็นสิ่งที่ต้องทำ! ข้อมูลนี้มีประโยชน์ "ไม่อยู่ในแผนภูมิ"!

— Berker Yüceer

1

นี่เป็นวิธีแก้ปัญหาที่ใช้ได้ผลสำหรับฉันในปี 2020

— Blue Bot

67

ฉันใช้ Chrome เวอร์ชัน 60 และคำตอบ CSS ก่อนหน้านี้ไม่ได้ผล

ฉันพบว่า Chrome กำลังเพิ่มไฮไลต์สีน้ำเงินผ่านoutlineสไตล์ การเพิ่ม CSS ต่อไปนี้แก้ไขให้ฉัน:

:focus {
    outline: none !important;
}

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

6

คุณครับเป็นผู้ช่วยชีวิต

— beckah

2

นี่คือสิ่งที่ใช้งานได้สำหรับ Chrome (เวอร์ชัน 61) บน Android

— Stefan

ใช้ได้กับ Chrome เวอร์ชันล่าสุด ขอบคุณ!

— CrazedCoder

ซุปเปอร์สงสัยว่าทำไมความuser-select:none

— Sean T

ฉันพยายามทุกอย่าง แต่มันได้ผลเหมือนมีเสน่ห์ ขอบคุณที่ช่วยผม!

— Avinash Kumar

25

แต่บางครั้งแม้ปิดuser-selectและtouch-calloutเปิดอยู่ก็cursor: pointer;อาจทำให้เกิดเอฟเฟกต์นี้ได้ดังนั้นเพียงแค่ตั้งค่าcursor: default;และใช้งานได้

— กัสตาโวบี
แหล่งที่มา

7

นี่คือคำตอบที่ถูกต้องcursor: pointer;ทำให้เกิดไฮไลต์จริงๆ แต่-webkit-tap-highlight-color: transparent;เป็นวิธีการแก้ปัญหาที่เป็นสากลมากขึ้น

— yanot

1

@yanot: อ่านคำเตือนเกี่ยวกับ-webkit-tap-highlight-colorก่อนที่จะติดฉลากเป็นโซลูชันที่ค่อนข้างเป็นสากล : developer.mozilla.org/en-US/docs/Web/CSS/…

— Hassan Baig

@HassanBaig ฉันคิดว่ามันชัดเจนว่าฉันไม่ได้หมายถึงข้ามเบราว์เซอร์สากลแต่ในบริบทนี้เช่นใน Chrome เวอร์ชันต่างๆ

— yanot

2

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

— RVP

3

cursor: defaultทำเคล็ดลับสำหรับฉันเมื่อไม่มีอะไรได้ผล

— Telarian

-2

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

ดูที่นี้:

ล้างการเลือกข้อความด้วย JavaScript

เป็นตัวอย่างของการล้างการเลือก คุณจะต้องแก้ไขให้ใช้งานได้เฉพาะกับองค์ประกอบที่คุณต้องการเท่านั้น

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

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

— Smith

นอกจากนี้สิ่งนี้จะมีผลกระทบต่อการเข้าถึงหรือไม่

— Smith

คุณสามารถล้างข้อความในตัวจัดการการคลิก แต่ดูที่คำตอบ @smts ด้วย CSS บริสุทธิ์

— Floremin

-8

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

.noSelect:hover {
  background-color: white;
}

— nagy.zsolt.hun
แหล่งที่มา

6

นี่คือสิ่งที่ไม่ดีและเป็นหนทางสู่นรกในอนาคต ปราศจากความผิด.

— Mike Barwick

จะเกิดอะไรขึ้นถ้าพื้นหลังของเว็บไซต์ไม่เป็นสีขาว?

— rideon88

สิ่งนี้ไม่สามารถบำรุงรักษาได้ โปรดอย่าทำแบบนี้

— Telarian