文字を選択したときの色は、::selection に color と background-color を書いて変えます。片方だけ書くと標準の色が消えること、一部分だけ色を変えるときに ::selection ではなく :root:: ...

入力欄の中に虫めがねなどのアイコンを置くには、入力欄とアイコンを包む要素を基準に、アイコンを position: absolute で重ねます。文字と重ならない余白の取り方、アイコンを押しても入力できるようにする pointer-ev ...

アイコンの右上に件数の丸いバッジを付けるには、アイコンの箱に position: relative、バッジに position: absolute を付けます。1桁は丸、2桁以上は横長にする書き方、0件で隠す方法、ボタンの名前に件数を ...

:focus-visible に outline を書くと、Tab キーで選んだときだけ太い枠が出て、ボタンをマウスで押したときには出ません。暗い背景でも見える2色の枠、強制カラーモードで消えない書き方、枠が切れるときの直し方も確かめ ...

リストの先頭の黒丸は、list-style-type で四角や好きな文字に変えられます。色と大きさだけなら ::marker、①②③のような連番なら @counter-style を使います。記号の位置の違いも確かめました。互換性デー ...

チェックボックスと文字を label で包み、input:checked + span に text-decoration: line-through を書くと、JavaScript なしで、チェックした項目にだけ取り消し線が付きます ...

ボタンの色をカスタムプロパティ1つに決め、ホバー・押している間・無効の色は color-mix() で黒や白を混ぜて作ります。混ぜる色空間の違い、無効の色の作り方、継承と書く順番でつまずく点も確かめました。

スクロールバーの色は scrollbar-color、太さは scrollbar-width で変えられます。つまみを丸くするなら ::-webkit-scrollbar を使いますが、標準の2つのプロパティを指定した要素では無視され ...

ボタンに position: relative を付け、::before を inset: -10px で外にはみ出させると、見た目は 24px のまま、押せる範囲が 44px 四方に広がります。小さなアイコンボタンのタップ領域を、見 ...

記事の見出しに「1.」「1.1」のような番号を、HTML に書かずに CSS のカウンターで振ります。h3 の番号を節ごとに 1 に戻す書き方、よくある間違い、読み上げ用の名前に番号を入れる方法、目次の番号、長い見出しの折り返しまで確 ...