csstest：CSS 「user-select」を使って、ユーザー側のテキスト選択可能なエリアを制限

CSS 「user-select」を使うと、ユーザーがテキストを選択できる場所を制限できます。正式なプロパティではないので、ブラウザごとの実装に差異がありますが、単純にテキストを選択できなエリアを作ることはできます。ただし、あくまで簡易的な制限であって、画像のコピー制限などと同様にソースを見るなどすれば、容易にテキストをコピーできます。

下の［テキスト選択を禁止したbox（１）］は、boxを形成するdiv要素全体に「user-select:none」を指定して、制限をかかけています。box内のダミーテキストは選択できなくなりますが、input要素やtextareaは選択可能です。

htmlソース

.none-area  {
    width:100%;
    /*---中略---*/
    border:5px solid #ccc;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    }

（１）テキスト選択を禁止したbox

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

条件による振り分けなどで、input要素やtextareaも選択を制限する必要が場合は、個別に「user-select:none」を指定します（主にMacのSafariで検証）。次の（２）では、（１）に加えて、input要素やtextareaも制限しています。フォーカスはできますが、プレースフォルダーを選択したり、消すことはできません。次のソースを追加しています。

.none-area2 input[type="text"], 
.none-area2 textarea  {
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    }

（２）input要素やtextareaも含めて、テキスト選択を禁止したbox

逆に全称セレクタ「*{}」を利用して、全ての要素のテキストを選択禁止にし、input要素とtextareaのみを制限解除したいときは、次のソースのようにします。動作は（１）と同じになりますので、動作サンプルは省略します。

* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;        
    }
input[type="text"], textarea {
    -webkit-user-select: element;
    -moz-user-select: element;
    -ms-user-select: element;
    }

また、テキストを選択禁止にしたエリアに含まれるimg要素は、テキストと同様に選択できなくなりますが、画像の制限の場合とは違い、右クリックやドラッグが可能でそのままコピーできます。

（３）テキスト選択を禁止したbox内のimg要素

Amazon.co.jp ウィジェット