0

On my site, I have a checkmark (✔).

I have styled these to be white in color inside a green circle.

.check{
  border-radius:9px;
  padding:2px 4px;
  background-color:#00B57A;
  color:White;
  font-size:8px;
}
<span class="check">&#x2714;</span>

This works fine on desktop, however, on my android device the checkmark is red and on an iPad, it's a dark black/grey color.

Why is this happening and what I can do about it?

Tom Blodget
  • 20,260
  • 3
  • 39
  • 72
Paddy Hallihan
  • 1,624
  • 3
  • 27
  • 76
  • 1
    Related - https://stackoverflow.com/questions/32413731/color-for-unicode-emoji and https://stackoverflow.com/questions/32915485/how-to-prevent-unicode-characters-from-rendering-as-emoji-in-html-from-javascrip – Paulie_D Aug 15 '19 at 15:59

2 Answers2

1

Try setting the color with a text-shadow and then setting the color to transparent.

.check{
  border-radius:9px;
  padding:2px 4px;
  background-color:#00B57A;
  color: transparent;  
  text-shadow: 0 0 0 white;
  font-size:8px;
}
<span class="check">&#x2714;</span>
APAD1
  • 13,509
  • 8
  • 43
  • 72
0

Color names are kind of tricky, in that they may mean different things to different browsers and OSs.

Granted, these two links are for developing an app, not HTML, but it's worth noting that it can be different.

The COLOR_NAME could equal: BLACK, BLUE, CYAN, GRAY (DKGRAY for dark gray and LTGRAY for light gray), GREEN, MAGENTA, RED, WHITE or YELLOW. Mind that you have to use capital letters.

http://android4beginners.com/2013/06/appendix-b-everything-about-colors-in-android/

Don't hard-code system color values in your app. The color values provided below are intended for reference during your app design process. The actual color values may fluctuate from release to release, based on a variety of environmental variables. Always use the API to apply system colors; for developer guidance, see UIColor.

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/

If you want 100% compatibility, stick with RGB values. It's also something to note that HTML/CSS values should be lowercase. You have an uppercase "W", which could be throwing things off. It shouldn't, but it could.

You'll also notice that "white" isn't a named color in either iOS or Android, so it's likely generating a color based on the string. HTML will do this. If you put a word, name, or even a random string where the color name should be, you'll get a color. This could happen because you use the capital "W" when the browser demands lowercase.

Why does HTML think “chucknorris” is a color?

computercarguy
  • 2,173
  • 1
  • 13
  • 27
  • ah cool makes sense I suppose, p.s. the reason for the capitals is because thats what they have on w3schools https://www.w3schools.com/cssref/css_colors.asp – Paddy Hallihan Aug 15 '19 at 16:29
  • @PaddyHallihan, yep, I saw that too. Another link I saw about HTML color names was all lowercase, but had spaces in the names. I don't think spaces would work any better than capitals, IMO. – computercarguy Aug 15 '19 at 16:30
  • This... doesn't really apply. The color is defined in CSS on a website, not an app, so the important list of color names here is [CSS's](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords), which is case-insensitive and has included `white` since CSS1. *HTML* thinks `chucknorris` is a color, but CSS won't even try. – AuxTaco Aug 16 '19 at 01:16