:invalid だと、開いた時点で必須の欄が赤くなります。:user-invalid に変えると、入力して欄を離れたときや送信しようとしたときに、間違っている欄だけが赤くなります。赤くなるタイミングも Chromium で確かめまし ...

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

数値の入力欄の上下ボタンは、::-webkit-inner-spin-button に -webkit-appearance: none を書くと消えます。個数や金額のような数値を入れる欄で、スピンボタンとも呼ばれるこの上下ボタンを見 ...

select の矢印を変えるには、appearance: none で既定の矢印を消し、背景の SVG か ::after で描きます。フォームのセレクトボックスを、プルダウンの矢印までサイトのデザインに合わせたいときに使える方法です ...

合計金額と人数を入れると、1人あたりの額を出す割り勘の部品を React で作りました。100円単位で切り上げて全員同じ額にする場合と、端数を幹事が払う場合の2通りを並べ、全角の数字や IME で打ったときの扱いも確かめています。

入力欄のまとまりを fieldset で囲むと、legend の見出しが枠線の上に載った枠になります。枠を角丸にする CSS、disabled でまとめて無効にする書き方、細い画面ではみ出すときの直し方を Chromium で確かめま ...

センチとインチのように、どの欄に打ってもほかの欄が換算される入力欄を React で作りました。state に持つものを「最後に打った欄と、打ったままの文字列」に絞る理由と、文字列を数にするとき・計算結果を表示するときの注意を確かめて ...

打つたびに「1,234,567」のように3桁区切りで表示される金額の入力欄を、React で作りました。type=”number” を使わない理由、IME で変換中の扱い、フォームで区切りのない数を送る方法を確 ...

色だけなら accent-color の1行で変えられます。形から変えるなら appearance: none で見た目を消し、枠と ::before のチェックを描きます。未確定の状態と、強制カラーモードでチェックが消える問題の直し ...

ラベルを左右にドラッグすると数値が増減する入力欄を、React と Pointer Events で作りました。setPointerCapture でラベルの外まで追いかける方法、Shift で10倍にする方法、0.01 刻みの丸め、 ...