Live Demo
カラーの丸いチップをホバー・クリックしてみてください。選択後は商品イメージの色が変わります。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<fieldset class="tbx-1044"><legend>選べるカラー</legend><div class="tbx-1044__product" aria-hidden="true"><span class="tbx-1044__shape"></span></div><div class="tbx-1044__options"><label><input type="radio" name="tbx-1044-color" value="slate" checked><span class="tbx-1044__dot tbx-1044__dot--slate" title="スレート"></span></label><label><input type="radio" name="tbx-1044-color" value="clay"><span class="tbx-1044__dot tbx-1044__dot--clay" title="テラコッタ"></span></label><label><input type="radio" name="tbx-1044-color" value="sage"><span class="tbx-1044__dot tbx-1044__dot--sage" title="セージ"></span></label></div></fieldset>
CSS
.tbx-1044{--item:#60768d;display:flex;flex-direction:column;align-items:center;gap:11px;border:0;margin:0;padding:0;font-family:system-ui}
.tbx-1044 legend{text-align:center;margin:0 0 4px;font-size:10px;color:#76869a;font-weight:700}
.tbx-1044:has(input[value=clay]:checked){--item:#cc7855}.tbx-1044:has(input[value=sage]:checked){--item:#7d9977}
.tbx-1044__product{display:grid;place-items:center;width:186px;height:105px;border-radius:10px;background:#e9eef1}
.tbx-1044__shape{position:relative;width:92px;height:69px;background:var(--item);border-radius:16px 16px 12px 12px;transform:rotate(-8deg);transition:background .3s,transform .3s;box-shadow:12px 8px 0 #a1b8c24a}
.tbx-1044__shape:before{content:"";position:absolute;inset:12px 19px 24px;border-radius:10px 10px 1px 1px;border:8px solid #e9eef1;border-bottom:0}
.tbx-1044__shape:after{content:"";position:absolute;left:-5px;right:-5px;bottom:0;height:12px;background:#e3e9ec;border-radius:4px 4px 10px 10px}
.tbx-1044__options{display:flex;gap:13px;justify-content:center}.tbx-1044__options label{position:relative;cursor:pointer;display:block}.tbx-1044 input{position:absolute;opacity:0;width:100%;height:100%;margin:0}
.tbx-1044__dot{display:block;width:22px;height:22px;border-radius:50%;outline:2px solid transparent;outline-offset:3px;transition:transform .2s,outline-color .2s}.tbx-1044__dot--slate{background:#60768d}.tbx-1044__dot--clay{background:#cc7855}.tbx-1044__dot--sage{background:#7d9977}
.tbx-1044 label:is(:hover,:focus-within) .tbx-1044__dot{transform:scale(1.16)}
.tbx-1044 input:checked+.tbx-1044__dot{outline-color:#354b61}.tbx-1044 input:focus-visible+.tbx-1044__dot{box-shadow:0 0 0 5px #dfa55e}
@media(prefers-reduced-motion:reduce){.tbx-1044__shape,.tbx-1044__dot{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
ECの商品カラー選択・バリエーションUI
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末でも情報が欠落しない設計を基本とします。クリックで操作するサンプルはタップで確認できます。
Browser：最新のChrome・Firefox・Safari・Edge向けCSS。:has()を利用する素材は最新ブラウザを想定しています。
Reduced Motion：prefers-reduced-motion: reduceに対応。