22

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.

2
  • Did you ever figure out anything more about this? For the moment we've also switched to the regular check mark but would rather go back to the heavy check mark.
    – Louis B.
    Feb 3, 2016 at 14:01
  • 1
    No, sorry. I haven't spent much time on it since we found the workaround. We're still using the regular check mark Feb 4, 2016 at 15:01

2 Answers 2

26

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:

The regular text version and emoji version on iOS.

In HTML, you can add the character by putting a &#xfe0e; directly following your check marks.

div {
  color: red;
}
<div>
  ✔ without variation selector<br>
  ✔&#xfe0e; with variation selector
</div>

6
  • It sucks to alter your markup for the sake of one client. But this does work. I guess at this point it's philosophical. If Apple decides that this really isn't a character but a picture, that's on them. Should you bother to put in extra directives to try to convince the device otherwise?
    – wberry
    Aug 3, 2016 at 17:02
  • What do you do if you set the checkmark as a content of a pseudo-element? I can't add this virtual character since I can't copy it as text and paste it in my css, right? Sep 23, 2016 at 17:19
  • 10
    @NikolayTsenkov Haven't tested this personally, but you should be able to add U+FE0E to your CSS with content: "✔\fe0e"; Sep 25, 2016 at 4:03
  • It works! I didn't know it should be added without the "&#" in-front. Sep 26, 2016 at 16:55
  • 1
    it works! I mean that's the most random thing I've seen though lol
    – vaskort
    Sep 13, 2018 at 17:18
7

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";
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.