マウスでクリックやドラッグし、選択した要素へスタイルを適用させる(::selection)
infinitewaveとある要素をクリックもしくはドラッグした際に、デザインを変更したい時がある。
cssの疑似要素で実装することも可能なため、今回はその方法についてまとめていく。
HTMLソースの準備
以下のようなHTMLソースを準備する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DEMO</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<p>ここを選択</p>
</body>
</html>擬似要素(::selection)の設定
CSS側で以下のように記述。基本的には、::beforeなどの擬似要素と使用方法は同じ。
p::selection {
background-color: rgb(45, 60, 112);
color: #fff;
}選択状態をオフにする
クリックもしくはドラッグした要素外を選択すればOK。
動作確認
以下のように要素を選択すると、デザインが変化すればOK。
Follow me!
