このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
accent-color
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
accent-color はCSS のプロパティで、一部の要素で生成されるユーザーインターフェイス要素の強調表示色を設定します。
試してみましょう
accent-color: red;accent-color: #74992e;accent-color: rgb(255, 255, 128);accent-color: hsl(250, 100%, 34%);<section> <div> <input checked="" type="checkbox" /> <label for="example-element">Example Label</label> </div></section>.container > div { display: flex; align-items: center;}#example-element { width: 40px; height: 40px;}#example-label { margin-left: 10px; font-size: x-large;}現在accent-color に対応しているブラウザーは、以下の HTML 要素に適用します。
各ユーザーエージェントには、読みやすさとコントラストを確実に保持するためのバリエーションを持つアクセントカラーがあります。そのアクセントカラーはすべてのユーザーインターフェイスコントロールで使用されるわけではなく、コントロールのすべての状態で使用されるわけでもありません。accent-color は、それが適用される状態でアクセントカラーを使用するユーザーインターフェイスコントロールにのみ適用されます。
構文
css
/* キーワード値 */accent-color: auto;/* <color> 値 */accent-color: darkred;accent-color: #5729e9;accent-color: rgb(0 200 0);accent-color: hsl(228 4% 24%);/* グローバル値 */accent-color: inherit;accent-color: initial;accent-color: revert;accent-color: revert-layer;accent-color: unset;値
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | auto は仕様通りに計算され、<color> 値はcolor プロパティで定義されたように計算される。 |
| アニメーションの種類 | 計算値の型による |
形式文法
accent-color =
auto|
<color>
例
独自の強調色を設定
HTML
html
<input type="checkbox" checked /><input type="checkbox" checked />CSS
css
input { accent-color: auto; display: block; width: 30px; height: 30px;}input.custom { accent-color: rebeccapurple;}結果
仕様書
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # widget-accent |