androidだけ、CSSのdisplayが正しく動作しない

Question

#entryBtn{
	display:none;
}
#check1:checked ~ #entryBtn{
	display:inline-block;
}

上のプログラムは、idがcheck1であるチェックボタンにチェックが入っている際にidがentryBtnである要素を表示し、チェックが外されている際には隠すというもので、パソコン上のGoogleChrome、ipadでは動作が確認されています。しかし、Androidで全く同じことを実行した際には、チェックボタン選択の有無にかかわらず、entryBtnの要素が表示されません。

Androidでも動作可能で、尚且つほかの端末でも動作可能にするためには、どのような手を施すべきでしょうか。どうかよろしくお願いいたします。

補足:うっかりしておりました。Androidバージョンは4.1.2です。

Comments

[horse_n_deer]

Androidのバージョンを明記してください。

[phphone]

申し訳ございません、忘れておりました。4.1.2です。

Answer 1

Android4.1系は関節セレクタ~が動作しませんのが、隣接セレクタ+は不完全ながら動作します。
下記であれば、チェック非チェックに応じて、表示が切り替わります。（4.1.1 GoogleNexus7で確認）

DEMO

<style>
  #entryBtn{
    display:none;
  }
  #check1:checked + #entryBtn{
    display:inline-block;
  }
</style>

<input type="checkbox" id="check1">
<button id="entryBtn">test</button>

---

追記

隣接セレクタは隣り合う要素同士でなければ動作しません。
チェックボックスの次の要素にボタンが来るように、タグを調整してください。
例えば以下のように、チェックボックス以降の要素をdivにまとめることで、解決します。

DEMO

<style>
  #entryBtn{
    display:none;
  }
  #check1:checked + div #entryBtn{
    display:inline-block;
  }
</style>

<input type="checkbox" id="check1">
<div>
  <h1>headtitle</h1>
  <p>paragraphs</p>
  <p>paragraphs</p>
  <p>paragraphs</p>
  <p>paragraphs</p>p
  <button id="entryBtn">test</button>
</div>

Comments

[phphone]

ご回答ありがとうございます。
ですが、ご指示に従い、以下のようなソースに差し替えたところ、PCでもandroidでも動作しなくなってしまいました。どうすればよいでしょうか？

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>

<style type="text/css">
<!--
INPUT {font-size: 45px;}

-->

#entryBtn{
display:none;
}
#check1:checked + #entryBtn{
display:inline-block;
}

</style>

<center><big><big><big><big><big><big>
<strong><p class='tan'><現代社会&gt;</p><p class='question'>友愛会が前進の組織
</p></strong><br><small><small><small><font color='#888888'>①まず、↑の問題を読んで考える</font></small></small></small><form method='post' action=''><input type="hidden" name="for_alert" value="52" /><input type="hidden" name="time" value="1453462741" /><input type="hidden" name="arrayc_r" value="17_7_23_9_28_29_22_6_30_12_26_3_4_16_32_5_11_19_13_24_2_20_21_1_31_15_27_25_10_18_8" /><input type="hidden" name="arrayc_w" value="17_7_23_9_28_29_22_6_30_12_26_3_4_16_32_5_11_19_13_24_2_20_21_1_31_15_27_25_10_18_8_14" /><input type="hidden" name="c_p" value="14_17_7_23_9_28_29_22_6_30_12_26_3_4_16_32_5_11_19_13_24_2_20_21_1_31_15_27_25_10_18_8" /><input type="hidden" name="_wrong_" value="14" /><br><input type="checkbox" id="check1"><label for="check1"><small><small><small><font color="#888888">②</font></small></small></small><small><small><small><small><small><small><b>自分なり</b>の答えを<b>紙に書いたらチェック</b></small></small></small></small></small></small></label><br><p id="entryBtn">1921、日本労働総同盟。30年代に最大
<font color="#888888"><small><small><small>←③解説または答え</small></small></small></font></p><br><input type='submit' id='entryBtn' name='right' value='^_^' /><div id='entryBtn'><font color='#888888'><small><small><small><b>←④<font color='red'>合っていたら</font></b>この顔をクリック</small></small></small></font></div><br> <input type='submit' id='entryBtn' name='wrong' value='ToT' /><div id='entryBtn'><font color='#888888'><small><small><small><b>←④<font color='red'>間違ってたら</font></b>この顔をクリック</small></small></small></font></div><br></form><br><br>
</big></big></big></big></big></big></center>

[horse_n_deer]

回答を追記しました。一部ではなく、「不具合を再現できる」ソースを記載した方が解答がスムーズに貰えると思いますよ。