【CSS】「Android 4 :checked 間接＆隣接セレクタ おかしい」でお困りの方へ

Riki Tanone

実機でも発生していました。4系〜4.3まではダメのようですね。

:checkedと隣接するようにdiv要素で#first, #secondをラップして、:checked時に隣接させたラップ用div要素のスタイルも変化するようにしてやれば、中の#firstと#secondもスタイルの描画更新が起こって期待通りの動作に矯正できる。

とのことです。↓みたいな感じかな

<style type="text/css">
  #first, #second {
    padding: 20px;
  }
  :checked + div #first {
    color: blue;
  }
  :checked + div #first {
    background-color: yellow;
  }
  :checked + div #first + #second {
    color: red;
  }
  :checked + div #second {
    background-color: silver;
  }
</style>
<body>
  <input type="checkbox" name="check" value="on">チェックチェック！
  <div>
      <div id="first">blue/yellow</div>
      <div id="second">red/silver</div>
  </div>
</body>