iOS 9 removed the possibility to change certain symbol colors using CSS

Question

We've been using various symbols such as checkmarks (✔) on our website and just noticed that with the release of iOS 9, Safari and other browsers have been updated to not respect the color attribute. The same behaviour can be found in both Safari and Chrome on iOS 9.

<div>test ✔</div>

div  {
   color: #ff0000;
   -webkit-appearance: none;
}

https://jsfiddle.net/afb14b2k/1/

The above example displays fine on other platforms (e.g. OS X). Is there a known workaround to get this to work on iOS 9?

Edit: It appears that this only applies to certain variants of check marks (and other variants of symbols). In this case we were using the heavy check mark (U+2714). When switching to the regular check mark (U+2713) iOS did not apply any formatting to it and we were able to apply a custom color to it.

Answer 1

In iOS 9, U+2714 HEAVY CHECK MARK is included in Apple's set of emoji characters. Just like the other emojis, it's drawn as a full-color bitmap instead of a single-color vector glyph, so you can't change its color with CSS. (In fact, there's no guarantee that the check mark will even be black. Other platforms draw it in a variety of different colors!)

To get iOS to draw the check mark as regular text that you can recolor, you need to use a U+FE0E VARIATION SELECTOR-15 character. If you put that variation selector character right after a ✔, iOS will use the regular text version (✔︎) instead of the emoji version (✔). OS X doesn't have an emoji variant, so these look the same, but on iOS the variants look slightly different:

In HTML, you can add the character by putting a ︎ directly following your check marks.

div {
  color: red;
}

<div>
  ✔ without variation selector<br>
  ✔&#xfe0e; with variation selector
</div>

Answer 2

If you are trying to style the element using CSS-after, this is how to do to make sure that the icon gets green in iOS. With only "✔" the iOS will not change the color of the icon.

.myElement:after {
  color:green;
  content: "✔\fe0e";
}