iPhoneでcssが効かない（inputタグcheckbox属性）

Question

前提・実現したいこと

現在Webアプリのようなものを作っており、お気に入り機能を作ろうとしています。
このお気に入り機能の表示をcheckboxにcssで疑似クラスを使って作成しようとしています。
WindowsのChromeでは思った通りに表示できたのですが、iPhone（iOS14）のSafariでは綺麗に表示されません。
どのようにすればiPhoneのSafariでも綺麗に表示できるのでしょうか？

発生している問題・エラーメッセージ

checkboxにチェックがされていない状態ではcheckboxのボックスが表示されてしまいます。
一方、チェック後は表示されません。以下の写真のような状態です。（favorite_areaクラスでチェックボックス全体を囲っています。divタグです）

チェック前

チェック後

該当のソースコード

.favorite_area input[type="checkbox"]{
  -webkit-appearance:none;
}
/* お気に入り登録前 */
.favorite_area input[type="checkbox"]::before {
  content: '☆';
  color: #484848;
  line-height: 1;
  font-size: 1.8em;
  position: absolute;
}
/* お気に入り登録後 */
.favorite_area input[type="checkbox"]:checked::before{
  content: '★';
  color: #ffffc1;
}

試したこと

・チェック前のcontentも'★'にしましたが、checkboxのボックスが表示されたままでした。
・divタグを作って、星を描き、checkboxを非表示という方法では、思った通りの表示になりはしたのですが、挙動が安定しないこと、文字サイズを大きくすると崩れることから断念しました。

Answer 1

iPhoneでなぜこのような表示になるのかは分かりませんでしたが、チェック前用とチェック後用のdivタグを作り、文字（☆または★）を表示させることにしました。
もし、なぜiPhoneでこのような現象が起こるのかご存知の方がいらっしゃいましたら、教えていただけると幸いです。