浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

onsenUIのチェックボックスのカスタマイズ方法と注意点

onsenuiのチェックボックスを、疑似クラスを使って見た目を変える際にandroidとiphoneで

それぞれいじるプロパティが異なっていることが判りました。

androidでは以下の疑似クラス

<!-- wp:paragraph -->
<p>.checkbox--material__checkmark</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>.checkbox--material__checkmark:before</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>.checkbox--material__checkmark:after</p>
<!-- /wp:paragraph -->

iphoneでは以下の疑似クラス

<!-- wp:paragraph -->
<p>.checkbox__checkmark</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>.checkbox__checkmark:before</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>.checkbox__checkmark:after</p>
<!-- /wp:paragraph -->

androidだとmaterialという名前が挟んでおり、疑似クラスを使う時はこのプロパティにも

目を向ける必要があります。

このような相違点はハイブリッドアプリではよくあることなので要確認です。

  • この記事いいね! (0)