cssのchecked指定について

<style>
div#radioBox input:checked + label { background:#CCC; }
</style>

<div id="radioBox">
<input type="checkbox" value="1" id="radio1"><label for="radio1">リスト1</label>
<input type="checkbox" value="2" id="radio2"><label for="radio2">リスト2</label>
</div>

チェックリストを複数ある為、下記のような書き方をしたいのですが、その場合CSSのどの部分を変更したら良いのでしょうか？
いろいろいじってみましたが、うまく動作しませんでした。

<div id="radioBox">
<label><input type="checkbox" value="1">リスト1</label>
<label><input type="checkbox" value="2">リスト2</label>
</div>

kei344

2017/04/29 15:15

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

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

回答1件

HTMLを変更してしまいますが、spanタグで文字を囲むというのはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        #radioBox > label input:checked + span {
13            background: #ccc;
14        }
15    </style>
16</head>
17<body>
18<div id="radioBox">
19    <label>
20        <input type="checkbox" value="1"><span>リスト1</span>
21    </label>
22    <label>
23        <input type="checkbox" value="2"><span>リスト2</span>
24    </label>
25</div>
26</body>
27</html>