チェックボックスとラベルを装飾したい

###前提・実現したいこと
CSSを使って、隠しチェックボックスがチェックされるとメニューが表示されるようにしています。
（実際は抜粋部分以外に10個くらい同じようなものが並んでいます）

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

チェックされている間、labelの背景色を変更したいのですがうまくいきません。
お手数ですがご教示ください。

###該当のソースコード
HTML

<label for="label3">チャットパレット</label>
<input type="checkbox" id="label3" class="cssacc" />

CSS
/ラベル/
.accbox label { /M/
display: block;
margin: 0;
padding : 0px;
color :#fff;
font-size: 24px;
font-weight: bold;
background :#7a6216;
border: double;
border-color: #fff;
cursor :pointer;
}

/ラベルにマウスを乗せた時/
.accbox label:hover {
background :#ca6964;
}

.accbox label + input[type=checkbox]{
background: #fff;
}

/チェックボックスは隠す/
.accbox input[type=checkbox] {
display: none;
}

/中身を非表示にしておく/
.accbox .accshow {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
}

/クリックで中身表示/
.cssacc:checked + .accshow {
height: auto;
padding: 5px;
background: #6f767d;
color: #eee;
opacity: 1;
}

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

回答1件

ベストアンサー

質問者さんが実現したいことは、以下のように行えると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        /*ラベル*/
8        .accbox label { /*M*/
9            display: block;
10            margin: 0;
11            padding: 0px;
12            color: #fff;
13            font-size: 24px;
14            font-weight: bold;
15            background: #7a6216;
16            border: double;
17            border-color: #fff;
18            cursor: pointer;
19        }
20
21        /*ラベルにマウスを乗せた時*/
22        .accbox label:hover {
23            background: #ca6964;
24        }
25
26        input[type=checkbox] + label {
27            background: #fff;
28        }
29
30        /*チェックボックスは隠す*/
31        .accbox input[type=checkbox] {
32            display: none;
33        }
34
35        /*中身を非表示にしておく*/
36        .accbox .accshow {
37            height: 0;
38            padding: 0;
39            overflow: hidden;
40            opacity: 0;
41        }
42
43        /*クリックで中身表示*/
44        .cssacc:checked ~ .accshow {
45            height: auto;
46            padding: 5px;
47            background: #6f767d;
48            color: #eee;
49            opacity: 1;
50        }
51    </style>
52</head>
53<body>
54<div class="accbox">
55    <input type="checkbox" id="label1" class="cssacc">
56    <label for="label1">チャットパレット</label>
57    <div class="accshow">
58
59        <form action="" method="POST">
60            <input type="textarea" style="width:275px;height:40px" placeholder="チャット入力" name="chat">
61            <input type="submit" value="送信">
62        </form>
63    </div>
64</div>
65<div class="accbox">
66    <input type="checkbox" id="label2" class="cssacc">
67    <label for="label2">チャットパレット</label>
68    <div class="accshow">
69
70        <form action="" method="POST">
71            <input type="textarea" style="width:275px;height:40px" placeholder="チャット入力" name="chat">
72            <input type="submit" value="送信">
73        </form>
74    </div>
75</div>
76<div class="accbox">
77    <input type="checkbox" id="label3" class="cssacc">
78    <label for="label3">チャットパレット</label>
79    <div class="accshow">
80
81        <form action="" method="POST">
82            <input type="textarea" style="width:275px;height:40px" placeholder="チャット入力" name="chat">
83            <input type="submit" value="送信">
84        </form>
85    </div>
86</div>
87<div class="accbox">
88    <input type="checkbox" id="label4" class="cssacc">
89    <label for="label4">チャットパレット</label>
90    <div class="accshow">
91
92        <form action="" method="POST">
93            <input type="textarea" style="width:275px;height:40px" placeholder="チャット入力" name="chat">
94            <input type="submit" value="送信">
95        </form>
96    </div>
97</div>
98<div class="accbox">
99    <input type="checkbox" id="label5" class="cssacc">
100    <label for="label5">チャットパレット</label>
101    <div class="accshow">
102
103        <form action="" method="POST">
104            <input type="textarea" style="width:275px;height:40px" placeholder="チャット入力" name="chat">
105            <input type="submit" value="送信">
106        </form>
107    </div>
108</div>
109</body>
110</html>