CSS metin seçimini devre dışı bırak

94

Şu anda, metin seçimlerini devre dışı bırakmak için bunu gövde etiketine ekledim:

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Ancak, benim inputve textareakutuları artık seçilemez. Nasıl yalnızca bu giriş öğelerini seçilebilir ve geri kalanını seçilemez hale getirebilirim?

css

— Neil
kaynak

inputVe textareaöğeleri seçebiliyorum : jsfiddle.net/Smy26

— Sampson

Görünüşe göre webkit bu öğeler üzerinde seçime izin veriyor, ancak moz bunu yapmıyor.

— Christian

5

metin seçimi vurgulamayı devre dışı bırakmak için

— Mottie

175

Bu özellikleri tüm vücuda uygulamayın. Bunları bir sınıfa taşıyın ve devre dışı bırakmak istediğiniz öğelere bu sınıfı uygulayın seçin:

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

— Bir zafer
kaynak

3

Chrome, Safari'de desteklenmez .

— knutole

5

@knutole Tabloyu tekrar okuyun. Değeri arasında elementKrom / Safari'de desteklenmez.

— MForMarlon

32

Tüm öğelerde kullanıcı seçimini de devre dışı bırakabilirsiniz:

* {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

Ve bunu, kullanıcının seçebilmesini istediğiniz öğelerde etkinleştirdikten sonra:

input, textarea /*.contenteditable?*/ {
    -webkit-touch-callout:default;
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

— Rik
kaynak

1

Tam tarayıcı desteği için, <body> veya <div> öğenize şu özellikleri eklemelisiniz: unselectable = "yes" onselectstart = "return false" onmousedown = "return false" / * dikkatli kullanın, son özellik MEVCUT İŞLEVSELLİĞİ ETKİLEYebilir * /

— Dan

11

Sadece her şeyi özetlemek istedim:

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

<div class="unselectable" unselectable="yes" onselectstart="return false;"/>

— Meglio
kaynak

1

Onmousedown = "return false": Firefox'un eski sürümleri HTML bir daha özellik ekleyerek gerektirebilir

— Dan

2

::selection,::moz-selection {color:currentColor;background:transparent}

— BT
kaynak

Burada belirtildiği gibi w3schools.com/cssref/sel_selection.asp . Bu şimdiye kadar herhangi bir CSS spesifikasyonunun parçası değildir ve Firefox için -moz- gerekir. Yani doğru olmalıdır: :: - moz-selection {color: currentcolor; arka plan: şeffaf} :: seçimi {color: currentcolor; arka plan: şeffaf}

— Vladislav

1

@Vladislav Moz öneki hakkında iyi bir nokta. Dürüst olmak gerekirse, w3schools'a güvenmeyin. Bu çok korkunç bir kaynak. MDN, gerçek tarayıcı uyumluluk sürümlerini verir ve :: selection, CSS taslağından kaldırıldı, ANCAK geri eklendi: developer.mozilla.org/en-US/docs/Web/CSS/::selection . Başka bir not, firefox önek ihtiyacını ortadan kaldırmaya hazır: bugzilla.mozilla.org/show_bug.cgi?id=509958

— BT

2

tüm seçimi devre dışı bırakabilirsiniz

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

şimdi giriş ve metin alanı etkinleştirmeyi etkinleştirebilirsiniz

input, textarea{
-webkit-touch-callout:default;
-webkit-user-select:text;
-khtml-user-select: text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;}

— Shahnawaz
kaynak

1

*Bu amaçla bir joker kart seçici kullanın .

#div * { /* Narrowing, to specific elements, like  input, textarea is PREFFERED */
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

Şimdi, kimliğine divsahip bir div içindeki her öğenin seçimi olmayacak.

Demo

— Starx
kaynak

0

bodyistediğiniz öğelerin listesini yazmak yerine .

— Eric Fortis
kaynak

0

Someth Victory'ye katılıyorum, seçilememesini istediğiniz bazı öğelere belirli bir sınıf eklemeniz gerekiyor.

Ayrıca, bu sınıfı javascript kullanarak belirli durumlarda ekleyebilirsiniz. Buradaki örnek İçeriğin CSS yardımıyla seçilemez hale getirilmesi .

— Starikovs
kaynak

0

Seçimi her yerde devre dışı bırakın

input, textarea ,*[contenteditable=true] {
  -webkit-touch-callout:default;
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
   }

IE7

 <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">

— Cristianojeda
kaynak