CSS `::-moz-color-swatch` 擬似要素

非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。

::-moz-color-swatch は CSS の擬似要素であり、 Mozilla 拡張で、 <input> の type="color" で選択された色を表します。

メモ: ::-moz-color-swatch を <input type="color"> 以外で使うと、何にも一致せず、効果がありません。

構文

css

::-moz-color-swatch {
  /* ... */
}

html

<input type="color" value="#de2020" />

css

input[type="color"]::-moz-color-swatch {
  border-radius: 10px;
  border-style: none;
}

どの仕様書にも含まれていません。

このページは MDN の貢献者によって 2026年6月15日に最終更新されました。