cssのみでドロップダウン選択で表示切替は無理

質問

cssのみでドロップダウン選択で表示切替は無理ですよね。
ドロップダウンじゃなかったら、表示切替ができました。
<input type="checkbox" id="toggle1"></input>
<div class="toggle-outer">
<label for="toggle1">クリックして開く▼</label>
</div>
<div class="toggle-inner">
<p>
長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章
</p>
</div>
<style>
#toggle1 {
/* display: none; */
visibility: hidden;
opacity: 0;
transition: 2s;
}
.toggle-inner {
/* display: none; */
transition: 1s;
visibility: hidden;
opacity: 0;
}
#toggle1:checked ~ .toggle-inner {
/* display: block; */
visibility: visible;
opacity: 1;
transition: 1s;
}
</style>

回答No.1

t_ohta

入力擬似クラスに :checked はあるけどドロップダウンの selected に紐付く擬似クラスは無いので無理でしょうね。

補足

javascriptにすると、
https://bonoponz.hatenablog.com/entry/2020/05/12/%E3%80%90Web%E3%80%91%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%81%A7%E8%A1%A8%E7%A4%BA%E5%86%85%E5%AE%B9%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B
のページにある通り、
セレクトごとに、
document.getElementById('Box1').style.display = "";と
document.getElementById('Box1').style.display = "none";で分ける必要が生じてきます。
これを防ぐには、外部ソフトを読み込むか、
jqueryのどちらかしか道はなく、
いずれにせよ、構文が煩雑になってしまい、
管理ができなくなってしまいます。
つまり、これは無理ゲーということなのですね。