###### tags: `CSS筆記`
# CSS accent-color
一般情況下，如果我們想要更改checkbox、ratio、range的顏色需要透過persudo的方式來修改樣式，但目前**Chrome.93**已經推出一個新的CSS語法，讓我們可以透過一行語法將顏色修改，選取顏色無效果的代表Chrome版本低於93。

這個新的語法叫做 **accent-color**，我們可以將此語法加入到input的css中，就可以將顏色改變嚕!

input{
    accent-color : #c0ff00;
}

而如果要更進階一點，讓使用者選自己喜歡的顏色可以參考以下範例~

<iframe src="https://codesandbox.io/embed/jolly-solomon-kb77s?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="jolly-solomon-kb77s"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

<br>
<br>

而要達到自訂顏色的關鍵就是使用**CSS的變數功能**，我們可以先預設一個變數裡面的值是你喜歡的顏色，也就是預設顏色。

***style.css***

:root {
    --color-accent: #c0ff00;
}

input {
    accent-color: var(--color-accent);
}

之後利用JS來做動態修改的部分，**colorpicker**是我的顏色選取器，只要選取器**Change**也就是被選取的時候觸發，之後在宣告一個變數，變數的值**要跟CSS定義的變數名稱一樣**。

之後我們利用**document.documentElement.style**底下的**setProperty**，來設定我們在CSS定義的變數裡面的值。

***index.js***

const colorpicker = document.querySelector("#colorpicker"); //顏色選取器
const colorVar = "--color-accent"; //要跟CSS定義的變數名稱一樣

colorpicker.addEventListener("change", (e) => {
    //e.target.value會直接抓到顏色選取器的顏色色碼
    document.documentElement.style.setProperty(colorVar, e.target.value);
});