accent-color

例

アクセントカラーの設定

要素のアクセントカラーを変更するには、accent-rose-500 や accent-lime-600 のようなユーティリティを使用します

<label>
  <input type="checkbox" checked />
  Browser default
</label>
<label>
  <input class="accent-pink-500" type="checkbox" checked />
  Customized
</label>

これは、チェックボックスやラジオボタンなどの要素を、ブラウザのデフォルトの色を上書きしてスタイリングするのに役立ちます。

不透明度の変更

要素のアクセントカラーの不透明度を制御するには、カラー不透明度修飾子を使用します

<input class="accent-purple-500/25" type="checkbox" checked />
<input class="accent-purple-500/75" type="checkbox" checked />

アクセントカラーの不透明度の設定は、ブラウザのサポートが限られており、現時点では Firefox でのみ動作します。

カスタム値の使用

以下を使用してください accent-[<value>] 構文 を設定するにはアクセントカラー完全にカスタムの値に基づいて

<input class="accent-[#50d71e] ..." type="checkbox" />

CSS 変数の場合は、以下も使用できます accent-(<custom-property>) 構文

<input class="accent-(--my-accent-color) ..." type="checkbox" />

これは以下の省略形です accent-[var(<custom-property>)] これは、var() 関数を自動的に追加します。

ホバー時に適用

プレフィックスの accent-color ユーティリティを、次のようなバリアントで hover:* を使用して、その状態でのみユーティリティを適用します

<input class="accent-black hover:accent-pink-500" type="checkbox" />

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。

レスポンシブデザイン

プレフィックスの accent-color ユーティリティ md: のようなブレークポイントバリアントを持つ accent-color ユーティリティを使用して、ユーティリティを適用するのはミディアム スクリーンサイズ以上

<input class="accent-black md:accent-pink-500 ..." type="checkbox" />

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。

テーマのカスタマイズ

--color-* テーマ変数を使用して、以下をカスタマイズしますcolor プロジェクト内のユーティリティ

@theme {
  --color-regal-blue: #243c5a; 
}

これで accent-regal-blue ユーティリティをマークアップで使用できます

<input class="accent-regal-blue" type="checkbox" />

テーマのカスタマイズの詳細については、以下をご覧ください テーマのドキュメント.