accent-color
試一試
accent-color: red;
accent-color: #74992e;
accent-color: rgb(255 255 128);
accent-color: hsl(250 100% 34%);
<section class="default-example container" id="default-example">
<div>
<input checked="" id="example-element" type="checkbox" />
<label for="example-element" id="example-label">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
/* Keyword values */
accent-color: auto;
/* <color> values */
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);
/* Global values */
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;
值
正式定義
正式語法
accent-color =
auto |
<color>
示例
設定自定義強調色
HTML
html
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
CSS
css
input {
accent-color: auto;
display: block;
width: 30px;
height: 30px;
}
input.custom {
accent-color: rebeccapurple;
}
結果
規範
| 規範 |
|---|
| CSS Basic User Interface Module Level 4 # widget-accent |
瀏覽器相容性
載入中…
另見
background-color、border-color、caret-color、color、column-rule-color、outline-color、text-decoration-color、text-emphasis-color、text-shadow：其他顏色相關屬性<color>：相關資料型別<input>：相關 HTML 元素