チェックボックスにチェックを入れたら背景色が変わるようにしたい

実現したいこと

チェックボックスにチェックを入れたら背景色が変わるようにしたい

前提

HTML

1<p>今後見てみたいレシピ<br> 2 <div class="box2"> 3 <label><input type="checkbox" name="和食" value="wasyoku"><span>和食</span></label> 4 <label><input type="checkbox" name="中華" value="china"><span>中華</span></label> 5 <label><input type="checkbox" name="洋食" value="you"><span>洋食</span></label> 6 <label><input type="checkbox" name="イタリアン" value="itarian"><span>イタリアン</span></label> 7 <label><input type="checkbox" name="スイーツ" value="sui-tu"><span>スイーツ</span></label> 8 <label><input type="checkbox" name="その他" value="sonota"><span>その他</span></label> 9 </div> 10 </p> 11コード

CSS

1label{2 accent-color: gray;3 background-color: white;4 margin: 5px;5 padding: 5px;6 border: 1px solid black;7 border-radius: 5px;8}9label:hover{10 background-color: gray;11}12label input:checked + span{13 background: gray;14}

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

背景色は確かに変わるが文字の部分しか変わらない。 囲まれている部分全体の色が変わるようにしたい

該当のソースコード

label input:checked + span{ background: gray; }

試したこと

label input:checked + span{
background: gray;
}

spanの部分をlabelなどに変更しても変わりませんでした

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

ここにより詳細な情報を記載してください。