Metin seçimi vurgulamasını devre dışı bırakma

Düğmeler gibi davranan çapalar için (örneğin, Yığın Taşması sayfasının üst kısmındaki Sorular , Etiketler , Kullanıcılar vb.) Veya sekmeler noktaları için, kullanıcı yanlışlıkla metni seçerse vurgulama efektini devre dışı bırakmanın standart bir CSS yolu var mı?

Bunun JavaScript ile yapılabileceğini ve biraz googling'in yalnızca Mozilla -moz-user-selectseçeneğini sunduğunu fark ettim .

Bunu CSS ile başarmanın standartlara uygun bir yolu var mı, yoksa "en iyi uygulama" yaklaşımı nedir?

GÜNCELLEŞTİRME Ocak, 2017:

Göre Can I kullanım , user-selectşu anda Internet Explorer 9 ve önceki sürümlerinde (ama ne yazık ki hariç tüm tarayıcılarda desteklenir hala bir satıcı öneki gerekir).

Doğru CSS varyasyonlarının tümü:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Not user-select(şu anda bir de standardizasyon sürecinde olduğunu W3C çalışma taslağı ). Her yerde çalışacağı garanti edilmez ve tarayıcılar arasında uygulamada farklılıklar olabilir ve gelecekte tarayıcılar bunun için destek bırakabilir.

Daha fazla bilgi Mozilla Developer Network belgelerinde bulunabilir .

Çoğu tarayıcıda, bu user-select, başlangıçta CSS 3'te önerilen ve sonra terk edilen ve şimdi CSS UI Seviye 4'te önerilen CSS mülkündeki özel varyasyonlar kullanılarak elde edilebilir :

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Internet Explorer <10 ve Opera <15 için, unselectableseçilemez olmasını istediğiniz öğenin niteliğini kullanmanız gerekir . HTML'deki bir özelliği kullanarak bunu ayarlayabilirsiniz:

<div id="foo" unselectable="on" class="unselectable">...</div>

Ne yazık ki bu özellik devralınmıyor, yani içindeki her öğenin başlangıç ​​etiketine bir özellik koymanız gerekiyor <div>. Bu bir sorunsa, bunu bir öğenin torunları için yinelemeli olarak yapmak için JavaScript'i kullanabilirsiniz:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

30 Nisan 2014 Güncelleştirmesi : Ağaca her yeni öğe eklendiğinde bu ağaç geçişinin yeniden çalıştırılması gerekir, ancak @Han tarafından yapılan bir yorumdan , hedefin hedefine mousedownayarlanan bir olay işleyicisi ekleyerek bundan kaçınmanın mümkün unselectableolduğu görülmektedir. Etkinlik. Ayrıntılar için http://jsbin.com/yagekiji/1 adresine bakın.

Bu hala tüm olasılıkları kapsamıyor. Seçilemeyen öğelerde seçimleri başlatmak imkansız olsa da, bazı tarayıcılarda (örneğin Internet Explorer ve Firefox,) tüm belgeyi seçilemez hale getirmeden seçilemez öğeden önce başlayan ve biten seçimleri engellemek hala imkansızdır.

Internet Explorer için bir JavaScript çözümü:

onselectstart="return false;"

CSS 3'ün kullanıcı seçme özelliği kullanılabilir hale gelinceye kadar , Gecko tabanlı tarayıcılar -moz-user-selectzaten bulduğunuz özelliği destekler . WebKit ve Blink tabanlı tarayıcılar-webkit-user-select özelliği .

Bu elbette Gecko oluşturma motorunu kullanmayan tarayıcılarda desteklenmez.

Bunu yapmak için "standartlar" ile uyumlu hızlı ve kolay bir yol yoktur; JavaScript kullanmak bir seçenektir.

Asıl soru, kullanıcıların neden belirli öğeleri vurgulamasını ve muhtemelen kopyalayıp yapıştıramamasını istediğinizdir? Kullanıcıların web sitemin belirli bir bölümünü vurgulamasına izin vermek istemediğim tek bir kez karşılaşmadım. Birkaç arkadaşım, kodları okumak ve yazmak için saatler harcadıktan sonra, vurgulama özelliğini sayfanın neresinde olduklarını hatırlamanın bir yolu olarak veya gözlerinin bir sonraki nereye bakacaklarını bilmesi için bir işaretleyici olarak kullanacak.

Bunun yararlı olduğunu görebildiğim tek yer, bir kullanıcı web sitesini kopyalayıp yapıştırdıysa kopyalanması ve yapıştırılmaması gereken formlar için düğmeleriniz varsa.

<p>Öğeler hariç her şeyde metin seçimini devre dışı bırakmak istiyorsanız, bunu CSS'de yapabilirsiniz ( -moz-nonediğer tarayıcılarda izin verilen alt öğelerde geçersiz kılmaya izin veren öğelere dikkat edin none):

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

Önceki yanıtlardaki çözümlerde seçim durdurulur, ancak kullanıcı yine de imleç hala değiştiği için metin seçebileceğinizi düşünür. Statik tutmak için CSS imlecinizi ayarlamanız gerekir:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Bu, metninizi bir masaüstü uygulamasında olduğu gibi tamamen düz hale getirecektir.

Bunu Firefox ve Safari'de yapabilirsiniz (ayrıca Chrome?)

::selection { background: transparent; }
::-moz-selection { background: transparent; }

WebKit için geçici çözüm :

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

Bir CardFlip örneğinde buldum.

Hibrit CSS + jQuery çözümünü seviyorum.

İçindeki tüm öğeleri <div class="draggable"></div>seçilemez hale getirmek için bu CSS'yi kullanın:

.draggable {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.draggable input {
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
         -o-user-select: text;
            user-select: text;
 }

Ve sonra, jQuery kullanıyorsanız, bunu bir $(document).ready()bloğun içine ekleyin :

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

Hala giriş elemanlarının etkileşimli olmasını istediğinizi düşünüyorum, bu yüzden :not()sözde seçici. Kullanabilirsin'*'Umurumda değilse .

Dikkat: Internet Explorer 9 bu ek jQuery parçasına ihtiyaç duymayabilir, bu nedenle buraya sürüm kontrolü eklemek isteyebilirsiniz.

.hidden:after {
    content: attr(data-txt);
}

<p class="hidden" data-txt="Some text you don't want to be selected"></p>

Yine de bu en iyi yol değil.

CSS veya JavaScript kullanabilirsiniz .

JavaScript yolu desteklenir eski gibi tarayıcılar eski hem de Internet Explorer sürümlerine ama senin durumda değilse, o zaman CSS şekilde kullanabilirsiniz:

HTML / JavaScript:

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

HTML / CSS:

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

<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>

Ayrıca Internet Explorer için sözde sınıffocus (.ClassName: focus) ve eklemeniz gerekir outline-style: none.

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none; /* Internet Explorer  */
}

Bu satırları CSS'ye eklemeyi deneyin ve class özelliğinde "disHighlight" öğesini çağırın:

.disHighlight {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;
}

Hızlı Hack Güncellemesi

Değeri nonetüm CSS user-selectözellikleri (tarayıcı önekleri dahil) için kullanırsanız, bunun yine de oluşabileceği bir sorun vardır.

.div {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all             */
    -ms-user-select: none;     /* Internet Explorer  10+  */
     user-select: none;        /* Likely future           */
}

As CSS-Tricks , diyor sorun geçerli:

WebkitEtrafındaki öğeleri seçerseniz, metnin kopyalanmasına izin verir.

Aşağıdakini enforce, bir öğenin tamamının seçilmesi için de kullanabilirsiniz . Bunun için tek yapmanız gereken değeri olarak nonedeğiştirmek all.

.force-select {
    -webkit-user-select: all;  /* Chrome 49+     */
    -moz-user-select: all;     /* Firefox 43+    */
    -ms-user-select: all;      /* No support yet */
    user-select: all;          /* Likely future  */
}

Touch olayıyla Android tarayıcısında aynı şeyi elde etmekte zorluk çekenler için şunları kullanın:

html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

Less ve Bootstrap kullanıyorsanız şunları yazabilirsiniz:

.user-select(none);

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

<div id="foo" unselectable="on" class="unselectable">...</div>

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

-webkit-user-select: none;
-moz-user-select: none;

onselectstart="return false;"

::selection { 
    background: transparent; 
}

::-moz-selection { 
    background: transparent; 
}

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

<div class="draggable"></div>

.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.draggable input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
 }

if ($.browser.msie)
    $('.draggable').find(':not(input)').attr('unselectable', 'on');

Çalışma

CSS:

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

Bu işe yaramalı, ancak eski tarayıcılarda çalışmaz. Tarayıcı uyumluluğu sorunu var.

ile SASS (SCSS sözdizimi)

Bunu bir mixin ile yapabilirsiniz :

// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

Bir HTML etiketinde:

<div class="no-selectable">TRY TO HIGHLIGHT</div>

Bu CodePen'de deneyin .

Otomatik düzeltici kullanıyorsanız, diğer önekleri kaldırabilirsiniz.

Tarayıcı uyumluluğu burada .

Yalnızca Mozilla özelliğinin yanı sıra, hayır, yalnızca standart CSS ile metin seçimini devre dışı bırakmanın bir yolu yoktur (şu andan itibaren).

Fark ederseniz, Yığın Taşması gezinme düğmeleri için metin seçimini devre dışı bırakmaz ve normal seçim davranışını değiştirdiği ve kullanıcının beklentileriyle çakışmasına neden olduğu için çoğu durumda bunu yapmamayı öneririm.

Bu, bazı tarayıcılarda çalışır :

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

İstediğiniz öğeleri / kimlikleri boşluklar olmadan virgülle ayırarak seçicilerin önüne ekleyin:

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

Diğer cevaplar daha iyi; Bu muhtemelen son çare / catchall olarak görülmelidir.

Diyelim ki böyle iki tane var div:

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
}

<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

Kullanıcıya seçilemez bir his vermek için imleci varsayılan olarak ayarlayın.

Ön ekin tüm tarayıcılarda desteklenmesi için kullanılması gerekir. Önek olmadan bu tüm yanıtlarda çalışmayabilir.

Renk seçimi de gerekmiyorsa bu yararlı olacaktır:

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

... diğer tüm tarayıcı düzeltmeleri. O çalışacak Internet Explorer 9 veya sonrası.

Bunu, metin seçimini devre dışı bırakmak istediğiniz ilk div'e ekleyin:

onmousedown='return false;' 
onselectstart='return false;'

NOT:

Doğru cevap, metni seçmenizi engellediği için doğrudur. Ancak, sonraki birkaç ekran görüntüsünde (7 Kasım 2014'ten itibaren) göstereceğim gibi, metni kopyalayabilmenizi engellemez.

Gördüğünüz gibi sayıları seçemedik, ancak kopyalayabildik.

Test tarihi: Ubuntu , Google Chrome 38.0.2125.111.

İhtiyacım olan sonucu elde etmek için her ikisini de kullanmak zorunda olduğumu ::selectionveuser-select

input.no-select:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.no-select::selection {
    background: transparent;
}

input.no-select::-moz-selection {
    background: transparent;
}

Kolayca yapılır:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

Alternatif:

Diyelim ki bir <h1 id="example">Hello, World!</h1>. Bunun HTHT'sini kaldırmanız gerekecek h1, bu durumda Merhaba, Dünya . O zaman CSS'ye gidip bunu yapmanız gerekecek:

#example::before // You can of course use **::after** as well.
{
    content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.

    display: block; // To make sure it works fine in every browser.
}

Şimdi bunun metin değil, bir blok öğesi olduğunu düşünüyor.

Bu CSS değil, ama belirtmeye değer:

jQuery UI Seçimi Devre Dışı Bırak :

$("your.selector").disableSelection();

JavaScript olmadan çözümümü kontrol et:

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}

<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

Tekniğim uygulanmış olan açılır menü: http://jsfiddle.net/y4Lac/2/

Bu sözde eleman, CSS Seçicileri Seviye 3 taslaklarında olmasına rağmen, davranışının özellikle iç içe elemanlarla az belirtildiği ve birlikte çalışabilirlik sağlanamadığı göründüğü için Aday Öneri aşamasında kaldırıldı.

How :: selection iç içe elemanlarda nasıl çalıştığı konusunda tartışılmaktadır .

Tarayıcılarda uygulanmasına rağmen, sekme tasarımı (sizin durumunuzda) seçiminde aynı renk ve arka plan rengini kullanarak seçilmeyen bir metin yanılsaması yapabilirsiniz.

Normal CSS Tasarımı

p { color: white;  background: black; }

Seçimde

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

Kullanıcıların metni seçmesine izin verilmemesi kullanılabilirlik sorunlarını artıracaktır.