CSSでクリック時に画像やテキストが選択状態になるのを防ぐ

クリックしたときに画像やテキストを選択状態にしたくない時がある。

この記事でいう選択状態とは、☝️のようにクリックしたときに半透明な膜がかかることをいいます。

バージョン情報

• Angular: 5.2.3

• TypeScript: 2.5.3

• angular/cli: 1.6.5

• Node: 8.1.4

選択状態になるのを防ぐ方法

対象の画像やテキストにuser-select: none;を定義してあげると、クリックしても半透明な膜がかからなくなります。

サンプルコード

サンプルコードで実証します。鳥画像のスタイルクラスbirdに、user-select: none;を追加します。

src/app/app.component.html:

<img #bird [ngStyle]="birdPosition$ | async"
 class="bird" src="assets/images/bird.jpg">

src/app/app.component.scss:

.bird {
    height: 10%;
    position: absolute;
    left: 10%;
    user-select: none; // <- add this!
}

動作確認

上記のコードを起動して確認します。

☝️のように、スタイルにuser-select: none;を定義した画像は、クリックしても半透明の膜のようなエフェクトがかからなくなります。