CSS position: fixed; でメニューを表示 (2)

・右上の div をクリックするとウインドの右側にツールメニューを
 表示します。
・focus 擬似クラスを使用。
  JavaScript を使用しないサンプルです。
・メニュー領域以外をクリックするとメニューが閉じる。
ここをクリック


チェックボックス1
チェックボックス2
チェックボックス3

ラベル1:
ラベル2:
ラベル3:

リンク1
リンク2
(2015/12-2022/07)
動作     : Edge101, Firefox95, Chrome96

・:focus を使うので tabindex が必要です。
  ないと動作しません。

・details タグと summary タグで同じようなことができるか?
inserted by FC2 system