ब्लू हाइलाइट अक्षम करें जब कर्सर के साथ टच / प्रेस ऑब्जेक्ट: पॉइंटर


83

एक ब्लू हाइलाइट है जो तब भी दिखाई देता है जब एक Div जिसमें कर्सर होता है: पॉइंटर प्रॉपर्टी को क्रोम में टच किया जाता है। हम इससे कैसे छुटकारा पा सकते हैं?

मैंने निम्नलिखित कोशिश की है:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

लेकिन वे एक कर्सर के प्रेस पर नीले हाइलाइटिंग को प्रभावित नहीं करते हैं।

जवाबों:


122
-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 

समस्या की देखभाल करता है, क्योंकि यह हाइलाइट रंग को पारदर्शी बनाता है।

स्रोत: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/


6
-webkit-tap-highlight-color: transparent;भी ठीक है।
नील मॉर्गन

87

जहाँ तक मुझे ज्ञात है, व्लाद के का जवाब कुछ Android उपकरणों में समस्या पैदा कर सकता है। बेहतर समाधान:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;


कृपया स्पष्ट करें कि "उत्तर के ऊपर" का कौन सा उत्तर वैकल्पिक है
निमा दिराखनजन

1
तुम क्यों इस्तेमाल किया है rgba(0,0,0,0)के बजायrgba(255,255,255,0)
गौरव अग्रवाल

1
@GauravAggarwal अल्फा स्पेस समझ में आता है, इसलिए rgba (0,0,0,0) और rgba (255,255,255,0) के बीच कोई अंतर नहीं है। यह सिर्फ एक मामला है। मुझे लगता है ।oes rgba (255,255,255,0) अजीब काम करता है?
ओबो चेंग

4
यदि आप किसी भी तरह से पारदर्शी के साथ इसे ओवरराइड करने जा रहे हैं, तो एक आरजीबीए घोषणा क्यों है? वहाँ WebKit संस्करण है कि किसी भी तरह इस संपत्ति पर पारदर्शी कीवर्ड का समर्थन नहीं कर रहे हैं?
BoltClock

4
@BoltClock मैं वास्तव में 'पारदर्शी' कीवर्ड नहीं मिल सकता है MDN दस्तावेज़ इसलिए मुझे लगता है कि यह standard.Before मैं इस सवाल मैंने पढ़ा है का जवाब नहीं है इस लेख , ** ईसाई कुक ** की टिप्पणी सलाह जोड़ने के लिए है, क्योंकि वह cames कुछ सेमसंग डिवाइस के साथ समस्या। मुझे लगता है कि यह विशिष्ट डिवाइस का एक बग है।
ओबो चेंग

12

बस इसे अपनी स्टाइलशीट में शामिल करें और class="no_highlights"जिस तत्व को आप इस वर्ग पर लागू करना चाहते हैं, उसमें विशेषता जोड़ें ।

no_highlights{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

या आप वर्ग नाम हटाकर और ऐसा करके सभी तत्वों के लिए विश्व स्तर पर कर सकते हैं।

button,
textarea,
input,
select,
a{
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-tap-highlight-color: transparent;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
  user-select: none;

}

धन्यवाद :) लेकिन वैसे भी। नीले रंग की सीमा एक पहुंच सुविधा के रूप में है। यह बुरा लग रहा है लेकिन, इसकी मदद से किसी को इसकी सबसे ज्यादा जरूरत है।


1

डॉक्स के अनुसार आप बस यह कर सकते हैं:

-webkit-tap-highlight-color: transparent; /* for removing the highlight */

यह एंड्रॉइड के लिए क्रोम 68 और विंडोज पर क्रोम 80 पर मेरे लिए काम करता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.