あるサイトにハートマークをクリックしてカウントする機能をつけることになって「♥」とテキストでソースに書いたのですが、Android端末(nexus5)のchromeでチェックしてみるとCSSで指定した色とは別の色で表示されているよう。
サンプル
♥ ♥ ♥ ♥
上記ハートマークはCSSで左から赤、青、黄色、緑と指定しています。
Androidのchromeで見た状態のキャプチャが以下
全部同じ色になるます。
CSSの指定を
.aaa .bbb span.ccc{color:#cccccc;}
みたいに強力にしても変わる様子がない。
.aaa .bbb span.ccc{color:#cccccc !important;}
!importantを付けても変わらない。
<span style="cccccc">♥</span>
styelを直で書いてもダメ。
試しにハートマークを実体参照文字(♥とか♥)で表示しても色が変わってくれません。
他の記号で試してみる
サンプル
♥ ♠ ♣ ◆
今度はすべてグレーにしました。
Androidのchromeの表示のキャプチャは以下
どうやらトランプにまつわる記号に自動で色が付くようです。
ハートは赤、スペードとクローバーは黒、ダイヤは普通に色が付きました。
他のAndroid端末を持ってないので検証できないのですが、何が原因でしょうか。
初期値で色がついているのはまぁいいとして、CSSで変更できるようになりませんかな?
追記
id:multiverse2011さん ありがとうございます、もしかするとnexus5の独自仕様かもしれませんね。