वैसे भी क्रोम में तत्वों के ब्लू हाइलाइटिंग को रोकने के लिए जब जल्दी से क्लिक करें?

123

अधिकांश समय मैं इसके बारे में चिंतित नहीं हूं, लेकिन मेरे पास एक छवि हिंडोला है और अगर मैं अगले और पिछले div पर जल्दी से क्लिक करता हूं, तो उन्हें क्रोम में हाइलाइट किया जाएगा।

मैंने रूपरेखा का उपयोग करने की कोशिश की: कोई भी लेकिन कोई प्रभाव नहीं। क्या इसका कोई समाधान है?

css google-chrome

— लोहार
स्रोत

मुझे इसका प्रभाव वर्तमान क्रोम संस्करण

— बिलल बेगुएरजज

मुझे पता है कि आपके उपयोग का मामला अलग है, लेकिन किसी और के लिए जो इसे सभी लिंक से हटाना चाहते हैं, मैं ऐसा करने की सलाह नहीं देता। मैंने इसे PWA पर निकालने का प्रयास किया है, लेकिन दृश्य प्रतिक्रिया के बिना, उपयोगकर्ता की धारणा यह है कि ऐप धीमा है।

— collimarco

170

फ्लोरेमिन द्वारा प्रदान किए गए लिंक के अलावा , जो चयन को "स्पष्ट" करने के लिए जावास्क्रिप्ट का उपयोग करके पाठ चयन को साफ करता है, आप इसे पूरा करने के लिए शुद्ध सीएसएस का भी उपयोग कर सकते हैं। सीएसएस यहाँ है ...

.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"जिस क्लास में आप इस क्लास को लागू करना चाहते हैं, उसमें उस विशेषता को जोड़ें । मैं अत्यधिक इस सीएसएस समाधान एक कोशिश देने की सिफारिश करेंगे। जावास्क्रिप्ट का उपयोग करने में कुछ भी गलत नहीं है, मेरा मानना है कि यह संभावित रूप से आसान हो सकता है, और आपके कोड में कुछ चीजों को साफ कर सकता है।

एंड्रॉइड पर क्रोम के लिए -webkit-tap-highlight-color: transparent; एक अतिरिक्त नियम है जिसे आप एंड्रॉइड में समर्थन के लिए प्रयोग कर सकते हैं।

— SMTS
स्रोत

1

केवल क्रोम के लिए, आपको शायद केवल user-selectऔर केवल आवश्यकता है webkit-user-select।

— smts

यह वह समाधान है जिसके साथ मैं जा रहा हूं क्योंकि मैं केवल क्रोम में हाइलाइटिंग समस्या रखता हूं और यह बहुत अच्छा काम करता है। भाग लेने वाले सभी को धन्यवाद!

— स्मिथ

36

Android पर Chrome के साथ काम नहीं कर सका। मुझे इस्तेमाल करना था-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

— इवाज़ारु

25

-webkit-tap-highlight-color: transparent; क्रोम पर महत्वपूर्ण हिस्सा है

— FisNaN

Android -webkit-tap-highlight-color पर क्रोम के लिए: पारदर्शी; - मेरे लिए काम धन्यवाद!

— CK Munn

213

Android पर Chrome के लिए, आप -webkit-tap-highlight-color-CSS संपत्ति का उपयोग कर सकते हैं :

-webkit- टैप-हाइलाइट-रंग एक गैर-मानक सीएसएस संपत्ति है जो हाइलाइट का रंग सेट करता है जो एक लिंक पर दिखाई देता है जबकि यह टैप किया जा रहा है। हाइलाइटिंग उपयोगकर्ता को इंगित करता है कि उनके नल को सफलतापूर्वक पहचाना जा रहा है, और इंगित करता है कि वे किस तत्व पर टैप कर रहे हैं।

हाइलाइटिंग को पूरी तरह से हटाने के लिए, आप मान को transparentनिम्न पर सेट कर सकते हैं :

-webkit-tap-highlight-color: transparent;

ध्यान रखें कि इसका उपयोग करने पर परिणाम हो सकता है: outlinenone.com देखें

— Iwazaru
स्रोत

4

मैंने पाया कि जब आप उदाहरण के लिए टचस्क्रीन पर चलते हैं, तो क्रोम एंड्रॉइड पर ऐसा व्यवहार करेगा जैसा वह करता है। मेरे पास एक <div> था जो जब भी आप इसके अंदर कहीं क्लिक करते तो नीला रंग होता। केवल जब मैंने इस उत्तर का उपयोग किया तो यह बंद हो गया। धन्यवाद!

— वेलोरम

2

अन्य सीएसएस अटारी में से कोई भी ऐसा नहीं करेगा। इतना महत्वपूर्ण है कि नल पर प्रकाश डालने से जो कुछ भी क्लिक होता है, वह आपकी दृश्य भाषा को धीमा कर देता है।

— डोमिनिक सेरिसानो

23

-webkit-tap-highlight-color: transparent;काम भी करने लगता है।

— बर्नार्ड

1

मुझे यह पसंद आया, स्पर्श की घटनाओं के लिए यह एक जरूरी है! इस जानकारी में "चार्ट से बाहर" उपयोगिता है!

— बर्क युसेर

1

यह समाधान है कि मेरे लिए 2020 में काम किया

— ब्लू बॉट

66

मैं क्रोम संस्करण 60 चला रहा हूं और पिछले सीएसएस उत्तरों में से किसी ने भी काम नहीं किया है।

मैंने पाया कि क्रोम outlineशैली के माध्यम से नीले हाइलाइट जोड़ रहा था । निम्नलिखित सीएसएस जोड़ना मेरे लिए इसे तय किया:

:focus {
    outline: none !important;
}

— जेफ़ एल।
स्रोत

5

आप, श्रीमान, एक जीवन रक्षक हैं।

— 23

2

यह एंड्रॉइड पर क्रोम (संस्करण 61) के लिए काम कर रहा है

— स्टीफन

Chrome के अधिक हाल के संस्करणों के लिए काम करता है। धन्यवाद!

— CrazedCoder

सुपर, सोच रहा था कि मेरा ट्रस्टी user-select:noneकहीं क्यों नहीं मिल रहा है

— सीन टी

मैंने सब कुछ आजमाया लेकिन यह आकर्षण की तरह काम किया। मेरे बालों को बचाने के लिए धन्यवाद!

— अविनाश कुमार

25

लेकिन, कभी कभी, के साथ भी user-selectऔर touch-calloutबंद कर दिया, cursor: pointer;इस प्रभाव का कारण हो सकता है, तो, बस सेट cursor: default;और यह काम करेंगे।

— गुस्तावो बी।
स्रोत

7

यह एक सही उत्तर है, cursor: pointer;वास्तव में हाइलाइट का कारण बन रहा है। लेकिन -webkit-tap-highlight-color: transparent;अधिक सार्वभौमिक समाधान है।

— यानोट

1

@yanot: -webkit-tap-highlight-colorइसे अपेक्षाकृत सार्वभौमिक समाधान लेबल करने से पहले चेतावनी के बारे में पढ़ें : developer.mozilla.org/en-US/docs/Web/CSS/…

— हसन बेग

@HassanBaig मुझे लगता है कि यह स्पष्ट है कि मैं नहीं मतलब था है सार्वभौमिक पार ब्राउज़र है, लेकिन इस संदर्भ में, यानी की क्रोम विभिन्न संस्करणों भर में

— yanot

2

धन्यवाद - अन्य समाधानों में से कोई भी मेरे लिए काम नहीं किया। नीले हाइलाइट को दूर करने के लिए कर्सर पॉइंटर को हटाना पड़ा

— RVP

3

cursor: defaultमेरे लिए चाल चली जब कुछ और काम नहीं किया।

— तेलियन

-2

उन तत्वों पर चयन घटना के लिए एक हैंडलर बनाने की कोशिश करें और हैंडलर में आप चयन को साफ़ कर सकते हैं।

इस पर एक नजर डालिए:

जावास्क्रिप्ट के साथ स्पष्ट पाठ चयन

यह चयन को साफ़ करने का एक उदाहरण है। आपको केवल उस विशिष्ट तत्व पर काम करने के लिए इसे संशोधित करना होगा जिसकी आपको आवश्यकता है।

— Floremin
स्रोत

तो यह सीएसएस, हुह द्वारा तय नहीं किया जा सकता है? क्या मैं अपने क्लिक हैंडलर के अंदर चयनित पाठ को स्पष्ट कर सकता हूं? EDIT- उदाहरण के लिए धन्यवाद। यह बेकार है कि इसे जावास्क्रिप्ट के माध्यम से नियंत्रित किया जाना है। मैं उम्मीद कर रहा था कि यह सिर्फ एक सीएसएस मुद्दा था।

— स्मिथ

इसके अलावा, क्या इसका कोई पहुंच प्रभाव होगा?

— स्मिथ

आप क्लिक हैंडलर में पाठ को साफ़ कर सकते हैं, लेकिन शुद्ध सीएसएस के साथ @ उत्तर पर एक नज़र डालें।

— फ्लोरीन

-8

यह मेरे लिए सबसे अच्छा काम करता है:

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

— nagy.zsolt.hun
स्रोत

6

यह BAD और भविष्य के कुछ नरक के लिए एक सड़क है। कोई अपराध नहीं।

— माइक बैरविक

क्या होगा यदि वेबसाइट की पृष्ठभूमि सफेद नहीं है?

— सवारी

यह बनाए रखने योग्य नहीं है। कृपया कोई ऐसा न करे।

— तेलियन