CSS wyłącz zaznaczanie tekstu

93

Obecnie umieściłem to w tagu body, aby wyłączyć zaznaczanie tekstu:

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

Jednak pola my inputi textareabox nie można teraz wybrać. W jaki sposób mogę ustawić tylko te elementy wejściowe jako wybieralne, a pozostałych nie można wybierać?

css

— Neil
źródło

Mogę wybierać inputi textareaelementy: jsfiddle.net/Smy26

— Sampson

Wygląda na to, że webkit pozwala na wybór tych elementów, ale moz nie.

— Christian

5

możliwy duplikat reguły CSS, aby wyłączyć podświetlanie zaznaczenia tekstu

— Mottie

172

Nie stosuj tych właściwości do całego ciała. Przenieś je do klasy i zastosuj tę klasę do elementów, które chcesz wyłączyć, wybierz:

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

— Coś zwycięstwa
źródło

3

Nieobsługiwane w Chrome, Safari.

— knutole

5

@knutole Przeczytaj ponownie tabelę. Wartość stanowi elementnie jest obsługiwany w Chrome / Safari.

— MForMarlon,

32

Możesz także wyłączyć wybór użytkownika dla wszystkich elementów:

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

A niż włącz ją na elementach, które chcesz, aby użytkownik mógł wybierać:

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

— Rik
źródło

1

Aby zapewnić pełną obsługę przeglądarki, należy dodać następujące atrybuty do elementu <body> lub <div>: unselectable = "yes" onselectstart = "return false" onmousedown = "return false" / * używaj ostrożnie, ostatni atrybut może WPŁYWAĆ NA ISTNIEJĄCĄ FUNKCJONALNOŚĆ * /

— Dan

11

Chciałem tylko podsumować wszystko:

.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
źródło

1

Stare wersje Firefoksa mogą wymagać dodania jeszcze jednego atrybutu do HTML: onmousedown = "return false"

— Dan

2

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

— BT
źródło

Jak stwierdzono tutaj w3schools.com/cssref/sel_selection.asp . Jak dotąd nie jest to część żadnej specyfikacji CSS, a Firefox wymaga -moz-. Więc poprawne powinno być: :: - moz-selection {color: currentColor; background: transparent} :: selection {color: currentColor; background: transparent}

— Vladislav

1

@Vladislav Dobra uwaga na temat przedrostka moz. Szczerze mówiąc, nie ufaj w3schools. To takie straszne źródło. MDN podaje aktualne wersje zgodności przeglądarek i zauważa, że :: selection zostało usunięte z wersji roboczej CSS, ALE zostało dodane z powrotem: developer.mozilla.org/en-US/docs/Web/CSS/::selection . Kolejna uwaga, Firefox jest gotowy, aby usunąć potrzebę przedrostka: bugzilla.mozilla.org/show_bug.cgi?id=509958

— BT

2

możesz wyłączyć wszystkie zaznaczenia

.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;}

teraz możesz włączyć wprowadzanie i włączanie pola tekstowego

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
źródło

1

W *tym celu użyj selektora dzikich kart .

#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;
}

Teraz każdy element wewnątrz div z id nie divbędzie miał wyboru.

Próbny

— Starx
źródło

0

zamiast bodywpisywać listę potrzebnych elementów.

— Eric Fortis
źródło

0

Zgadzam się z Someth Victory, musisz dodać określoną klasę do niektórych elementów, których nie można wybrać.

Możesz również dodać tę klasę w określonych przypadkach za pomocą javascript. Przykład tutaj Unieważnianie zawartości za pomocą CSS .

— starikovs
źródło

0

Wyłącz zaznaczanie wszędzie

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
źródło