擬似クラス
参考:
使い方
参考:
CSS でリンクの色をクリック状態によって変える方法 | わーどしゅーぷれす
hover
参考:
:hover 擬似クラス | HTML クイックリファレンス
focus
参考:
フォームの input 要素を focus した時の枠の色を変える方法! | Qumeru マガジン
:focus 擬似クラス | HTML クイックリファレンス
focus-visible
参考:
2021年1月〜3月に各ブラウザで focus-visible 周りの動きがあったのでまとめた | sakito
focus-visible Class Demo | WICG
The Focus-Indicated Pseudo-class: :focus-visible | Selectors Level 4
リポジトリ:
WICG/focus-visible: Polyfill for `:focus-visible` – GitHub
link / visited / active
参考:
:visited 擬似クラス | HTML クイックリファレンス
:active 擬似クラス | HTML クイックリファレンス
リンクの色
ブラウザデフォルト
Chrome | Edge | Safari | Firefox | |
---|---|---|---|---|
未訪問:link |
#0000ee |
#0066cb |
#4100f1 |
#0000ee |
アクティブ:active |
#fe0000 |
なし | #ff0000 |
#ee0000 |
訪問済み:visited |
#551b8c |
#81007f |
#63008c |
#551b8c |
参考:
リンクのデフォルト色はブラウザに依存する | ノラトキの SiteStudio
Safari 5 および Chrome 6 における訪問済みリンクの識別 | Accessible & Usable
なぜテキストリンクは青色なのか? 意訳 | SHINOBU’s MEMO
Why are Links Blue? | A List Apart
What’s default HTML/CSS link color? | Newbedev
What’s default HTML/CSS link color? – Stack Overflow
Reset link colour to browser default – Stack Overflow
ブラウザでリンクの色をカスタマイズする
参考:
Safari や Chrome で Google のリンク色をカスタマイズする方法 | Stocker.jp
スマホでタップ時のハイライト表示を変更する
-webkit-tap-highlight-color
プロパティにハイライト表示の色を指定する。無効化する場合は透明色を指定する。
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
Code language: CSS (css)
参考:
iOS や Android でリンクタップ時のハイライト表示を変更する方法 | ウェブアンテナ
CSS3 によるタップした色を設定 | ShanaBrian Website
-webkit-tap-highlight-color | MDN
Remove Gray Highlight When Tapping Links in Mobile Safari | CSS-Tricks