スイッチ・プログレスバーなどUIパーツのCSS素材

中身は本物の input なので、フォームの送信・キーボード操作・読み上げはそのまま使えます。role="switch" で「スイッチ」として読み上げられます。チェックボックスの appearance を消して、見た目だけを描き直しています。

中身は本物の input なので、フォームの送信・キーボード操作・読み上げはそのまま使えます。チェックを入れると、四角が塗られてチェックの線が伸びます。

中身は本物の input なので、フォームの送信・キーボード操作・読み上げはそのまま使えます。選ぶと、丸の中の点がふわっと大きくなります。矢印キーで選び直せるのも、ふつうのラジオボタンと同じです。

中身は本物の input なので、フォームの送信・キーボード操作・読み上げはそのまま使えます。つまみの上に今の値を出し、つまみより左側を色で塗ります。塗る長さを決めるのに短いJSを使っています。最小・最大・刻みは min max step で変えられます。

HTMLの progress 要素の見た目を変えています。進み具合は value の数字で決まります。しま模様が流れるのは「進行中」の印で、終わったら cs-ui06--done を付けると止まります。

中身は本物の input なので、フォームの送信・キーボード操作・読み上げはそのまま使えます。数字を直接打ち込むこともできます。min max の範囲の外には行かず、端まで来たボタンは押せなくなります。

中身は本物の input なので、フォームの送信・キーボード操作・読み上げはそのまま使えます。中身はラジオボタンで、選んだ所へ白い下地がすべって移動します。3つ用の作りです。数を変えるときは --cs-n の数と、:nth-child の行を増やしてください。

中身は本物の input なので、フォームの送信・キーボード操作・読み上げはそのまま使えます。ボタンの部分は ::file-selector-button で見た目を変えています。選んだファイル名はブラウザが自動で表示します。

form role="search" の中に、検索欄と送信ボタンを並べています。入力すると右に出る「×」（消すボタン）も、色と形を合わせてあります（Chrome・Safari）。

目のボタンを押すと、入力したパスワードが見えるようになります。押した状態は aria-pressed で読み上げにも伝わります。

中身は本物の input なので、フォームの送信・キーボード操作・読み上げはそのまま使えます。中身は5つのラジオボタンです。マウスを乗せた星までが光り、押すと決まります。HTMLは5→1の逆の順に書き、CSSで並びを反対にしています。