☰

テキスト選択のハイライトを無効にする方法 質問する

tag-icon • tag-icon css cross-browser highlight textselection
テキスト選択のハイライトを無効にする方法 質問する

ボタンのように機能するアンカー (たとえば、この Stack Overflow ページのサイドバーにある「質問」、「タグ」、「ユーザー」というボタン) やタブの場合、ユーザーが誤ってテキストを選択した場合に強調表示効果を無効にする CSS 標準の方法はありますか?

これは JavaScript で実行できることがわかり、少しグーグルで検索すると Mozilla のみの-moz-user-selectオプションが見つかりました。

CSS を使用してこれを実現する標準準拠の方法はありますか。また、ない場合は、「ベスト プラクティス」アプローチは何ですか。

ベストアンサー1

2017年1月更新:

によると使ってもいいですかSafari のuser-select+ は、すべての主要ブラウザで目的の動作を実現するのに十分です。-webkit-user-select

利用可能な正しい CSS バリエーションはすべて次のとおりです。

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

user-select標準化プロセス中であることに留意してください（現在W3Cワーキングドラフト) どこでも動作することが保証されているわけではなく、ブラウザ間で実装に違いがある可能性があります。また、ブラウザは将来的にサポートを中止する可能性があります。

詳細は以下をご覧ください。Mozilla Developer Network ドキュメント。

この属性の値はnone、、、、、、およびです。texttoggleelementelementsallinherit

おすすめ記事