質問: ### 前提・実現したいこと CSSを使って、隠しチェックボックスがチェックされるとメニューが表示されるようにしています。 (実際は抜粋部分以外に10個くらい同じようなものが並んでいます) ### 発生している問題・エラーメッセージ チェックされている間、labelの背景色を変更したいのですがうまくいきません。 お手数ですがご教示ください。 ### 該当のソースコード HTML チャットパレット 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; }
回答: 質問者さんが実現したいことは、以下のように行えると思いますが、いかがでしょうか? ``` タイトル チャットパレット チャットパレット チャットパレット チャットパレット チャットパレット ```