0

I have an odd problem. I have a simple bit of jquery which changes the content of a div from a plus sign to a tick when a user clicks it. 

$(document).on("click", ".myDiv", function() {
  $(this).html('✔');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myDiv" style="background-color:rgb(0,0,0); color:rgb(255,255,255)">+</div>

The color of the text is important as it is being dynamically set to ensure it displays against the also dynamically set background. This all works well on my desktop, but when I look on a iPad the tick will always display in black and on an Android phone it is showing as red.

It would appear that this has something to do with the non-standard character. If I replace the tick with a *, for example, everything works fine.

Any ideas to stop this happening please?

Tyler Roper
  • 21,445
  • 6
  • 33
  • 56
Jules
  • 275
  • 1
  • 4
  • 11
  • 1
    Does this answer your question? [iOS 9 removed the possibility to change certain symbol colors using CSS](https://stackoverflow.com/questions/32639694/ios-9-removed-the-possibility-to-change-certain-symbol-colors-using-css) – coreyward Feb 27 '20 at 16:59

1 Answers1

0

As recommended by this excellent answer that also describes what is happening here you can include &#xfe0e; immediately after your ✔ character to resolve the issue:

$(document).on("click", ".myDiv", function() {
  $(this).html('✔&#xfe0e;');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myDiv" style="background-color:rgb(0,0,0); color:rgb(255,255,255)">+</div>
coreyward
  • 77,547
  • 20
  • 137
  • 166