emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

Androidのchromeでハートマークに色が自動でついてしまう

あるサイトにハートマークをクリックしてカウントする機能をつけることになって「♥」とテキストでソースに書いたのですが、Android端末(nexus5)のchromeでチェックしてみるとCSSで指定した色とは別の色で表示されているよう。

 

 

サンプル

♥ ♥ ♥ 

上記ハートマークはCSSで左から赤、青、黄色、緑と指定しています。
Androidのchromeで見た状態のキャプチャが以下

f:id:emj1025:20151015143326g:plain

全部同じ色になるます。

 


CSSの指定を

.aaa .bbb span.ccc{color:#cccccc;}

 みたいに強力にしても変わる様子がない。

 

.aaa .bbb span.ccc{color:#cccccc !important;}

 !importantを付けても変わらない。

 

<span style="cccccc">♥</span>

 styelを直で書いてもダメ。

 

試しにハートマークを実体参照文字(&#9829;とか&hearts;)で表示しても色が変わってくれません。

 

他の記号で試してみる

サンプル

♥ ♠ ♣ ◆

今度はすべてグレーにしました。

 

Androidのchromeの表示のキャプチャは以下

f:id:emj1025:20151015143446p:plain

どうやらトランプにまつわる記号に自動で色が付くようです。

ハートは赤、スペードとクローバーは黒、ダイヤは普通に色が付きました。

 

他のAndroid端末を持ってないので検証できないのですが、何が原因でしょうか。

初期値で色がついているのはまぁいいとして、CSSで変更できるようになりませんかな?

 

追記

id:multiverse2011さん ありがとうございます、もしかするとnexus5の独自仕様かもしれませんね。

 

emuramemo(c) All Rights Reserved.