CSSによるテキスト選択の無効化

92

現在、本文の選択を無効にするためにこれをbodyタグに入れています。

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

しかし、私inputとtextareaボックスは、今選択不可です。これらの入力要素のみを選択可能にし、残りを選択不可にするにはどうすればよいですか？

css

— ニール
ソース

要素inputとtextarea要素を選択できます：jsfiddle.net/Smy26

— サンプソン

Webkitはこれらの要素を選択できるように見えますが、mozではできません。

— クリスチャン

5

テキスト選択の強調表示を無効にするCSSルールの

— Mottie 2013年

171

これらのプロパティを全身に適用しないでください。それらをクラスに移動し、選択を無効にする要素にそのクラスを適用します。

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

— サムスビクトリー
ソース

3

Chrome、Safari ではサポートされていません。

— knutole 2014年

5

@knutoleテーブルをもう一度読みます。の値はelementChrome / Safariではサポートされていません。

— MForMarlon 2014

31

すべての要素でユーザー選択を無効にすることもできます。

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

そして、ユーザーが選択できるようにしたい要素でそれを有効にする：

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

— リック
ソース

1

ブラウザを完全にサポートするには、<body>要素または<div>要素に次の属性を追加する必要があります。 * /

— Dan

11

すべてを要約したいだけです：

.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;"/>

— メリオ
ソース

1

古いバージョンのFirefoxでは、HTMLにもう1つの属性を追加する必要がありました：onmousedown = "return false"

— Dan

2

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

— BT
ソース

ここで述べたように、w3schools.com/cssref/sel_selection.asp。これはこれまでのところCSS仕様の一部ではなく、Firefoxには-moz-が必要です。したがって、正しいものは次のとおりです。::-moz-selection {color：currentColor; background：transparent} :: selection {color：currentColor; background：transparent}

— Vladislav

1

@Vladislav moz接頭辞についての良い点。正直なところ、w3schoolsを信用しないでください。そのようなひどい情報源。MDNは実際のブラウザー互換性バージョンを提供し、:: selectionはCSSドラフトから削除されましたが、追加されました：developer.mozilla.org/en-US/docs/Web/CSS/ ::selection 。別のメモ、firefoxはプレフィックスの必要性を取り除く準備ができています：bugzilla.mozilla.org/show_bug.cgi

— BT

2

すべての選択を無効にできます

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

今、あなたは入力とテキストエリアを有効にすることができます

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

— シャナワズ
ソース

1

*この目的には、ワイルドカードセレクターを使用します。

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

これで、id divを持つdiv内のすべての要素は選択されなくなります。

デモ

— Starx
ソース

0

body必要な要素のリストを入力する代わりに。

— エリックフォルティス
ソース

0

私はSometh Victoryに同意します。選択不可にしたいいくつかの要素に特定のクラスを追加する必要があります。

また、JavaScriptを使用して特定のケースでこのクラスを追加することもできます。ここでの例CSSを使用してコンテンツを選択不可にします。

— スタリコフ
ソース

0

どこでも選択を無効にする

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
ソース