iphone（safari）でチェックボックス表示のズレを解消したい

スマホサイズのwebサイト制作は初心者で細かい部分に苦労しています。

前提・実現したいこと

リストを表示するために
頭にチェックボックス（チェック入り）をつけたリストを作りたいです。
チェックボックスは見る人が動かせないようにして欲しいと言われています。

ここに質問の内容
スマホで表示することを前提にしたページでiphone7(8)safari、Chromeで表示した場合、チェクボックスが微かに切れて表示されることを解消したいです。確認できる範囲でAndroidの一部ではずれて表示されないようです。
解決のためにアドバイスいただければ幸いです。

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

iphone7(8)safariで表示した場合、チェクボックスが微かに切れて（ずれて）表示される

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="UTF-8">
4<title>リスト</title>
5<meta name="keywords" content="">
6<meta name="description" content="">
7<meta name="viewport" content="width=device-width,initial-scale=1">
8
9<head></head>
10<body>
11<header>
12</header>
13    <main>
14        <div class="wapper">
15            <h1><span class="under">リスト</span></h1>
16            <h2><span class="under">くだもの</span></h2>
17<p><input type="checkbox" name="foo" value="1" checked="checked" disabled="disabled" /><input type="hidden" name="foo" value="1" />
18            りんご</p>
19<p><input type="checkbox" name="foo" value="2" checked="checked" disabled="disabled" /><input type="hidden" name="foo" value="2" />
20            みかん</p>
21<p><input type="checkbox" name="foo" value="3" checked="checked" disabled="disabled" /><input type="hidden" name="foo" value="3" />
22            なし</p>
23<p><input type="checkbox" name="foo" value="4" checked="checked" disabled="disabled" /><input type="hidden" name="foo" value="4" />
24            スイカ</p>
25<p><input type="checkbox" name="foo" value="5" checked="checked" disabled="disabled" /><input type="hidden" name="foo" value="5" />
26            ぶどう</p>
27<p><input type="checkbox" name="foo" value="6" checked="checked" disabled="disabled" /><input type="hidden" name="foo" value="6" />
28            もも</p>
29        </div>
30    </main>
31    <div class="wrap">
32    <input type="checkbox" name="check" value="本店" id="honten" checked disabled>
33    <label for="honten" class="sample">本店</label>
34    <input type="checkbox" name="check" value="東京支店" id="tokyo" disabled>
35    <label for="tokyo" class="sample">東京支店</label>　
36    <input type="checkbox" name="check" value="大阪支店" id="osaka">
37    <label for="osaka" class="sample">大阪支店</label>　
38    <input type="checkbox" name="check" value="名古屋支店" id="nagoya">
39    <label for="nagoya" class="sample">名古屋支店</label>　
40    <input type="checkbox" name="check" value="福岡支店" id="hukuoka">
41    <label for="hukuoka" class="sample">福岡支店</label>　
42 </div>
43<footer>
44</footer>
45</body>
46<html>

試したこと

cssのinlineやフォントサイズやマージンやパディングで整えることを試しましたが改善されませんでした。チェックボックスを操作できるようにすると綺麗に表示されました。
cssが効果的でなかったのでこちらではcssの記述はしていません。
input type="hidden"を削除してチェックボックスを操作できるようにすると綺麗に表示されました。

補足情報（FW/ツールのバージョンなど）

cerfweb

2020/11/16 08:41

cssが影響しているとしか思えませんので、今適用しているcssを提示していただけますか。

kajokajo

2020/11/16 09:07

コメントありがとうございます。初めにcssが影響していることを疑ったので現在テスト環境でcssは記述（link）をしていませんが同様の表示になります。htmlのみです。iphone7(8)Safari、Chromeで少しだけずれて表示されてしまいます。

行動規範の内容に同意します

回答1件

ベストアンサー

確かにおっしゃる通り、disabledの状態だと端が切れてしまうのを確認いたしました。Safariの開発ツールで調べたところ、opacityが1の時は表示されるが半透過にすると隠れてしまうようです。これはCSSフレームワークのBootstrap使用時でも同じなので、どうしても気になるようでしたら、デフォルトのcheckboxをdisplay:noneにしてカスタマイズするより方法がなさそうですね。（カスタマイズの方法はググれば色々紹介されていますので割愛します。）

投稿2020/11/16 11:22

cerfweb

総合スコア1907