Her neyse, hızlı bir şekilde tıklandığında Chrome'daki öğelerin Mavi vurgulanmasını önlemek için?

123

Çoğu zaman bunun için endişelenmiyorum ama bir resim karuselim var ve sonraki ve önceki bölümlere hızlı bir şekilde tıklarsam Chrome'da vurgulanacaklar.

Anahat kullanmayı denedim: yok ama efekt yok. Orada herhangi bir çözüm var mı?

css google-chrome

— demirci
kaynak

Bu etkiyi mevcut Chrome sürümünde

— görmüyorum

Kullanım durumunuzun farklı olduğunu biliyorum, ancak onu tüm bağlantılardan kaldırmak isteyebilecek herhangi biri için bunu yapmasını önermiyorum. Bir PWA'da kaldırmaya çalıştım, ancak görsel geri bildirim olmadan, kullanıcı algısı uygulamanın daha yavaş olduğu yönünde.

— collimarco

170

Seçimi "temizlemek" için JavaScript kullanarak metin seçimini temizleyen Floremin tarafından sağlanan bağlantıya ek olarak , bunu gerçekleştirmek için saf CSS de kullanabilirsiniz. CSS burada ...

.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"Bu sınıfı uygulamak istediğiniz öğeye özniteliği eklemeniz yeterlidir . Bu CSS çözümünü denemenizi şiddetle tavsiye ederim. JavaScript'i kullanmanın yanlış bir yanı yok, bunun potansiyel olarak daha kolay olabileceğine ve kodunuzdaki işleri biraz temizleyebileceğine inanıyorum.

Android'de krom için, Android'de -webkit-tap-highlight-color: transparent; destek için denemek isteyebileceğiniz ek bir kuraldır.

— SMTS
kaynak

1

Yalnızca Chrome için, muhtemelen yalnızca user-selectve webkit-user-select.

— smts

Bu, yalnızca Chrome'da vurgulama sorununu yaşadığım için kullandığım çözüm ve harika çalışıyor. Katılan herkese teşekkürler!

— Smith

36

Android'de Chrome ile çalışmasını sağlayamadı. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

— Kullanmam

25

-webkit-tap-highlight-color: transparent; Chrome'un kilit kısmı

— FisNaN

Android -webkit-tap-vurgu-rengindeki krom için: şeffaf; - Benim için çalıştı teşekkürler!

— CK Munn

213

Android'de Chrome için -webkit-tap-vurgu-renk CSS özelliğini kullanabilirsiniz :

-webkit-tap-vurgulama-rengi, dokunulduğunda bir bağlantı üzerinde görünen vurgunun rengini ayarlayan standart olmayan bir CSS özelliğidir. Vurgu, kullanıcıya dokunmalarının başarıyla tanındığını ve hangi öğeye dokunduklarını belirtir.

Vurgulamayı tamamen kaldırmak için değeri şu şekilde ayarlayabilirsiniz transparent:

-webkit-tap-highlight-color: transparent;

Bunun erişilebilirlik üzerinde sonuçları olabileceğini unutmayın: outlinenone.com'a bakın

— Iwazaru
kaynak

4

Örneğin bir dokunmatik ekranda çalıştırdığınızda, Chrome'un Android'de olduğu gibi davranacağını buldum. İçimde bir yere tıkladığınızda mavi renkte yanıp sönen bir <div> vardı. Sadece bu cevabı kullandığımda durdu. Teşekkürler!

— Valorum

2

Diğer css atty'lerin hiçbiri bunu yapmaz. Dokunarak vurgulama, tıklanan şeyin görünümünü bozarak görsel dilinizi bozduğu için çok önemlidir.

— Dominic Cerisano

23

-webkit-tap-highlight-color: transparent;işe yarıyor gibi görünüyor.

— Bernard

1

Bunu beğendim, dokunma etkinlikleri için bir zorunluluktur! Bu bilginin "çizelge dışı" kullanışlılığı var!

— Berker Yüceer

1

Bu benim için 2020'de işe yarayan çözüm

— Blue Bot

67

Chrome 60 sürümünü çalıştırıyorum ve önceki CSS yanıtlarından hiçbiri işe yaramadı.

Chrome'un outlinestille mavi vurgu eklediğini buldum . Aşağıdaki CSS'yi eklemek benim için sorunu çözdü:

:focus {
    outline: none !important;
}

— Jeff L.
kaynak

6

siz, bayım, hayat kurtarıcısınız.

— beckah

2

bu, Android'de Chrome (sürüm 61) için çalışan sürüm

— Stefan

Chrome'un daha yeni sürümleri için çalışır. Teşekkürler!

— CrazedCoder

Süper, güvenilirimin neden user-select:nonehiçbir yere varamadığını merak ediyordum

— Sean T

Her şeyi denedim ama bu çekicilik gibi çalıştı. Saçımı kurtardığın için teşekkürler!

— Avinash Kumar

25

Ancak bazen, kapatıldığında user-selectve touch-calloutkapatılsa bile cursor: pointer;bu etkiye neden olabilir, bu nedenle, sadece ayarlayın cursor: default;ve işe yarayacaktır.

— Gustavo B.
kaynak

7

Bu doğru bir cevap, cursor: pointer;gerçekten vurguya neden oluyor. Ancak -webkit-tap-highlight-color: transparent;daha evrensel bir çözümdür.

— yanot

1

@yanot: -webkit-tap-highlight-colornispeten evrensel bir çözüm olarak etiketlemeden önce hakkındaki uyarıyı okuyun : developer.mozilla.org/en-US/docs/Web/CSS/…

— Hassan Baig

@HassanBaig Sanırım evrensel çapraz tarayıcıyı kastetmediğim açık , ancak bu bağlamda, yani kromun farklı sürümlerinde

— yanot

2

teşekkürler - diğer çözümlerin hiçbiri benim için işe yaramadı. Mavi vurguyu ortadan kaldırmak için imleç işaretçisini kaldırmak zorunda kaldım

— RVP

3

cursor: defaultbaşka hiçbir şey işe yaramadığında benim için hile yaptı.

— Telarian

-2

Bu öğelerdeki select olayı için bir işleyici oluşturmayı deneyin ve işleyicide seçimi temizleyebilirsiniz.

Şuna bir bak:

JavaScript ile Metin Seçimini Temizle

Seçimi temizlemeye bir örnek. Yalnızca ihtiyacınız olan belirli öğe üzerinde çalışması için onu değiştirmeniz gerekir.

— Floremin
kaynak

Yani CSS ile düzeltilemez, ha? Tıklama işleyicimin içindeki seçili metni temizleyebilir miyim? DÜZENLEME- Örnek için teşekkürler. Bu, javascript aracılığıyla ele alınması gerektiği için berbat. Bunun sadece bir CSS sorunu olduğunu umuyordum.

— Smith

Ayrıca, bunun erişilebilirlik üzerinde herhangi bir etkisi olacak mı?

— Smith

Tıklama işleyicideki metni temizleyebilirsiniz, ancak saf CSS ile @smts yanıtına bir göz atın.

— Floremin

-8

Bu benim için en iyisi:

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

— nagy.zsolt.hun
kaynak

6

Bu KÖTÜ ve gelecekteki cehenneme giden bir yoldur. Alınma.

— Mike Barwick

ya web sitesinin arka planı beyaz değilse?

— rideon88

Bu sürdürülemez. Bunu kimse yapmasın lütfen.

— Telarian