10

Does anyone know why this is happening?

I want both checkmarks to be white, but the :after element is black (however it seems to have a vertical white to black gradient).

It works in Chrome and Safari on a MacBook.

Open this example page in Safari on an iPhone to see the issue:

http://output.jsbin.com/lerudihiho/

(and here is the code: http://jsbin.com/ponamazoso/edit?html,css,output)

Anders Sjögren
  • 146
  • 1
  • 6
  • Possible duplicate of [iOS 9 removed the possibility to change certain symbol colors using CSS](http://stackoverflow.com/questions/32639694/ios-9-removed-the-possibility-to-change-certain-symbol-colors-using-css) – CoenFuze Sep 15 '16 at 16:48

1 Answers1

21

The fix here is similar to when you're using U+2714 in HTML: you need to add a U+FE0E VARIATION SELECTOR-15 directly after the check mark to tell iOS to draw it as an outline rather than a bitmap. Here's what this looks like in CSS:

body::after {
  content: "\2714\fe0e";
  color: red; 
}
mqklin
  • 1,928
  • 5
  • 21
  • 39
Carter Sande
  • 1,789
  • 13
  • 26