HTML訓導處｜在iOS Safari中更改勾選字符的顏色

前言

前陣子在專案執行的過程中，發現其中一個套件裡的勾選字符 ✔︎ ( ✔) ，就算 color 的權重已經下得比相撲選手還要重，仍然無法修改顏色，上網爬文後原來解決方法這麼簡單，如果你也有相同困擾那就繼續看下去吧！

（ 圖片來源 ）

是的！只需要添加一串字符就好！

在 iOS 9 中， U+2714 HEAVY CHECK MARK 包含在 Apple 的表情符號字符集中。就像其他表情符號一樣，它被繪製為全色位圖而不是單色矢量字形，因此無法使用 CSS 來更改顏色。

要讓 iOS 將 ✔︎ 繪製為可以重新著色的常規文本，就需要使用 U+FE0E VARIATION SELECTOR-15 字符。如果將該變體選擇符放在 ✔ 之後， iOS 就可以使用常規文本版本而不是表情符號版本。 OS X 沒有表情符號變體，因此它們看起來相同，但在 iOS 上，變體看起來會略有不同，那變體選擇符要怎麼添加呢？

在 ✔ 後面添加 ︎ 即可，就是這麼簡單！

✔︎

資料來源

1. How do I change the color of a check mark to white in iOS Safari?
2. iOS 9 removed the possibility to change certain symbol colors using CSS