質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

checkbox

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

受付中

iPhoneでcssが効かない(inputタグcheckbox属性)

cerasusflorere
cerasusflorere

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

checkbox

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0グッド

0クリップ

2045閲覧

投稿2021/09/25 01:59

前提・実現したいこと

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

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

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

チェック前
チェック前
チェック後
チェック後

該当のソースコード

css

1.favorite_area input[type="checkbox"]{ 2 -webkit-appearance:none; 3} 4/* お気に入り登録前 */ 5.favorite_area input[type="checkbox"]::before { 6 content: '☆'; 7 color: #484848; 8 line-height: 1; 9 font-size: 1.8em; 10 position: absolute; 11} 12/* お気に入り登録後 */ 13.favorite_area input[type="checkbox"]:checked::before{ 14 content: '★'; 15 color: #ffffc1; 16}

試したこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

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

投稿2021/09/26 05:59

cerasusflorere

総合スコア13

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

checkbox

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。